基于Laravel5.5+OAuth2.0实现Github/微博/QQ/微信登录
OAuth2.0是目前业界关于授权的标准协议,使用OAuth,用户可以授权第三方应用获取一些特定的权限而无需输入相应的账号密码，并且可随时收回权限。例如我们常见的QQ登录/微信登录等,背后都采用了OAuth2.0协议。
有关OAuth的更多介绍,可以参考这篇博客
本项目将基于Laravel框架和OAuth2.0实现Github/微博/QQ/微信登录。
最终效果
运行项目
下载项目
1
git clone https://github.com/SnDragon/laravel-oauth.git
安装依赖
1
2cd laravel-oauth
composer install配置nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22server {
listen 80;
# server_name可以自定义,与配置回调的域名一样即可
server_name longerwu.oauth.com www.longerwu.com;
# 替换为对应的项目路径
root /Users/wuxilong/code/laravel-oauth/public;
# 网站默认首页
index index.php index.html index.htm;
# 修改为 Laravel 转发规则，否则PHP无法获取$_GET信息，提示404错误
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}往hosts增加规则(非本地调试可忽略)
1
127.0.0.1 longerwu.oauth.com www.longerwu.com
运行nginx
- 复制一份
.env.example到.env,并对OAuth的相关配置进行修改 - 效果验证
本地访问http://www.longerwu.com/(替换为上面配置的域名),若出现如下效果,则运行成功:
Github接入
Github接入相对来说比较简单，无需审核,可直接创建。
- 申请应用&配置回调
打开这个地址,点击右上角的New OAuth App按钮,填入相应信息即可获得client_id和client_secret
将获取到的client_id和client_secret以及回调配置到.env中
1
2
3GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
GITHUB_CALLBACK_URL=xxx效果验证
微博登录
微博接入稍微麻烦一点,需要填写开发者资料,认证之后才能申请应用。
- 填写开发者资料
- 申请应用&配置回调
填写应用基本信息:
填写应用高级信息(回调):
添加测试账号:
将获取到的client_id和client_secret以及回调配置到.env中
1
2
3WEIBO_CLIENT_ID=xxx
WEIBO_CLIENT_SECRET=xxx
WEIBO_CALLBACK_URL=xxx效果验证
QQ互联接入
QQ登录应该说是我们最常用的登录方式之一,以前只需要在QQ互联申请应用,就算没通过审核也可以进行本地开发调试,可惜最近QQ互联开放平台貌似改了策略，只有备过案的网站才能接入OAuth2.0登录了,不知道后续还会不会放开,目前未备案通过的应用会报100008错误:
注意,这一步需要填写网站备案号,所以需要先去备案,备案周期由于需要管局审核,可能会比较长(5个工作日以上),个人开发者主办单位名称填自己的名字,填写完相关信息之后等待审核通过即可(一般是一个工作日)
将获取到的client_id和client_secret以及回调配置到.env中
1
2
3QQ_CLIENT_ID=
QQ_CLIENT_SECRET=
QQ_CALLBACK_URL=效果验证
微信接入
- 应用申请
微信授权登录分两种:公众平台和开放平台,其中开放平台一般是给企业申请的，需要上传营业执照啥的，不适合个人开发者开发学习,而公众平台又分两种,订阅号和服务号,服务号一般也是给企业申请的,但订阅号又无法开通网页授权获取用户信息功能。
好在微信考虑到申请流程可能比较麻烦,为方便开发者,提供了一个沙盒环境,开发者可以在这里申请微信公众平台测试账号并进行开发
回调域名配置
要想使用微信的OAuth2.0网页授权,我们还需要配置回调域名(注意这里只需填写域名即可,无需填写完整回调地址),找到网页服务-网页账号-网页授权获取用户基本信息,点击右边的修改按钮,填入域名即可
修改配置
1
2
3WECHAT_CLIENT_ID=
WECHAT_CLIENT_SECRET=
WECHAT_CALLBACK_URL=效果验证
这里需要注意的是,微信公众平台的授权登录需要在微信客户端打开,开放平台则可以直接在PC网页打开扫描二维码登录。由于我们使用的是公众平台测试账号,所以也需要在手机打开,如果有线上域名和服务器,则直接部署到线上即可。
若没有线上环境或者想在本地调试的话,这里提供两种思路:
- 电脑安装手机模拟器进行调试
- 手机配置代理连接到本地电脑(需要和电脑在同一个局域网内)
例如Mac可以使用charles来配置代理,还可以用来抓包。
charlse配置:
打开Proxy-Proxy Settings,默认使用8888端口:
手机配置(以苹果手机为例):
无线局域网-点击连着的wifi-最底下配置代理改为手动,服务器填电脑的IP,端口填上面charlse配置的端口:
配置完成后手机应该就可以正常访问我们的虚拟站点了。
用微信打开我们的网站,点微信登录:
TODO
- 代码优化
- 制作composer包