微信小程序登录
2020-08-17 本文已影响0人
Amazing慕丶涵
小程序登录
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。小程序登录官方示例文档
登录流程时序
小程序登录流程在小程序中随便找了一个页面,进行登录在小程序中随便找了一个页面,进行登录
1、调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
2、调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。
我将上面的两步拆成了6步,请看
1)获取 临时登录凭证code,如下图
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 登录请求
wx.login({
timeout:2000,
success:({code})=>{
// code有效期是5分钟
console.log(code);
}
})
},
临时登录凭证code
得到code值,注:code有效期为5分钟
2)带着code去请求开发者服务器,然后开发者服务器去请求微信接口服务,返回用户唯一标识 OpenID 和 会话密钥 session_key,如下图
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 登录请求
wx.login({
timeout:2000,
success:({code})=>{
// code有效期是5分钟
console.log(code);
// 发起request请求到自己的服务器
wx.request({
url: 'http://www.xxx.cn/api/v1/wxlogin',
data: {code},
header:{
'Authorization':'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsmp0aSI6IjU4OGE2NWFhNDk4M2EzMWM4YWM1OTg3ODgwNzgzY2YxZWZiZGMxMjc1NjdiZDlkNTdjYjY2MGI1MzQ2NWJlMzZjOTQwNzZjOTY4ZWNhOTYxIn0.eyJhdWQiOiIxIiwianRpIjoiNTg4YTY1YWE0OTgzYTMxYzhhYzU5ODc4ODA3ODNjZjFlZmJkYzEyNzU2N2JkOWQ1N2NiNjYwYjUzNDY1YmUzNmM5NDA3NmM5NjhlY2E5NjEiLCJpYXQiOjE1OTc2NTE4NTksIm5iZiI6MTU5NzY1MTg1OSwiZXhwIjoxNjI5MTg3ODU5LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.vL7k_IGoxVH0aMH5oQGro8_swqh-ag-VL8q_1j5UPY1zUQY_Pv9Ko8lvvy4RPCj2JdvLT4RFR0d6j4yqYIL-cS-J5OTk-f-VlLRCWSj9iMcfn8lbQIEBxXTCav98epwiWXb2QEd76ezxG_QKG3vprXrm76M_3iPnb7X0MvXrNJdTnZGEB7nnX--XxC3-bdhdZxeOwRh8lIu6bupXUBwN63CQetvN1W7E-qjE3QsHMNmuhzk_iiQa_WksqKc8GmIbR78Au_hcK_N2F4jZBRthsvx6Aqor932BkEF829piId_W_9hpqoQC3Q5b7Rd7uc0if9U6b5CS1q6NYJ2MLwDlODN3tGn9ZsObfKue04eTIY3wfjXcVFzhkdptK2gfMP0KqcA_Wip__pe2izA47ITrbi6grGSWSLVHesABEPJ7OuMbdJDF8-8xQJfXIHU2w02G0YT2kR5yimj_WcPiH7drvBq6hNBX4BVp14Z0Qdiyc8QjJF95eDBtWbySpOsIxF-iMrNJyrKO-pkkZqHtXU-M45hODDOpb0l5PVPiT2PDJE7BJfu_PFzHanSSg68bld9SaKFiUWhwSxNRDj50JJyuhpNiOZ-qhaqfkJUTGvwjHMfFheyEBm61klcscpDeBGtwdmA5sNOBjNJ8NM77rup4dm0Cqja9gPMmHlXUphOpiOg'
},
method: 'POST',
success:ret=>{
console.log(ret);
}
})
}
})
},
3)在自己接口服务器中定义登录处理的路由
/*
* 请求验证
* 符合 restful 标准
* uri 独立域名或者能区分的前缀 api
* uri 最好有版本
* 结果用名词不用动词
* 内容可以用 rsa 非对称加密 https://blog.csdn.net/haibo0668/article/details/81489217
*/
Route::group(['middleware'=>'auth:api','prefix'=>'v1','namespace'=>'Api'],function (){
// 小程序登录
Route::post('wxlogin','LoginController@wxlogin');
});
登录控制器中创建小程序登录代码
4)在登录控制器中创建小程序登录代码
// 微信小程序登录
public function wxlogin(Request $request)
{
// $appid 和 $secret 在微信小程序后台中可以查看
$appid = 'wxxxxxxxxxx';
$secret = '801xxxxxxxxxxxxxxxx';
// $code 是小程序传过来的
$code = $request->get('code');
// 请求地址
$url = "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code";
$url = sprintf($url,$appid,$secret,$code);
// 声明请求客户端 verify 默认检查证书ssl
$client = new Client([
'timeout' => 5,
'verify' => false
]);
$response = $client->get($url);
$ret = (string)$response->getBody();
return $ret;
}
5)在后台接受参数, 对小程序服务器发起GET请求得到openid
对小程序服务器发起GET请求得到openid
6)在小程序登录请求中就可以得到了openid
得到openid
注:本地测试,会出现的问题
1、小程序跳过验证ssl证书
小程序跳过验证ssl证书
2、后台使用请求客户端声明跳过验证ssl证书验证 verify 默认检查证书ssl,verify 改为false
// 我使用的是这个类库
use GuzzleHttp\Client;
// 声明请求客户端 verify 默认检查证书ssl
$client = new Client([
'timeout' => 5,
'verify' => false
]);