uniapp+thinkphp5实现微信登录

前言

之前做了微信登录，所以总结一下微信授权登录并获取用户信息这个功能的开发流程。
设置

1.首先得在微信公众平台申请一下微信小步伐账号并获取到小步伐的AppID和AppSecret
https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2Fwacodepage%2Fgetcodepage%3Ftoken%3D418035161%26lang%3Dzh_CN

2.申请认证，企业认证300/年，个人似乎是30/年，得认证，不然没有微信登录的权限。
3.设置前端uniapp的项目，在主目录下找到manifest.json文件->微信小步伐设置->将你的小步伐的AppID填写上去

到此根本设置就已经完毕。
登录流程

1.在实现登录之前，首先得相识登录的流程，这是微信登录的时序图

2.具体步调为:
①小步伐 wx.checkSession 校验登陆态，success ：接口调用成功，session_key未过期；fail ：接口调用失败，session_key已过期；
②由于微信公众平台发布了《关于小步伐收集用户手机号行为的规范》中提到部分开发者在处理用户手机号过程中，存在不规范收集行为，影响了用户的正常使用体验，所以平台在向用户申请获取手机号时应明确向用户阐明收集的必要缘故起因，并提供用户隐私协议由用户主动同意；所以登录通过需通过@getphonenumber获取用户的encryptedData、iv，再通过wx.login获取用户的授权临时票据code参数；
③.服务端接收到参数后随即通过请求Appid + appSecret + code 到微信方服务器 https://api.weixin.qq.com/sns/jscode2session 获取 session_key & openid；
④.获取到openid&&session_key后随机根据getphonenumber获取到的encryptedData、iv对用户的手机号码进行解密；
流程实现(后端)(PHP)

1. public function login()
2.     {
3.         $code = input('code');
4.         $encryptedData = input('mobileEncryptedData');
5.         $iv = input('mobileIv');
6.         if ($code) {
7.             $appID = 'wxa***************'; //微信公众平台->小程序AppID
8.             $appSecret = '****************';//微信公众平台->小程序AppSecret
9.             // 使用 code 换取 session_key 和 openid
10.             $url = "https://api.weixin.qq.com/sns/jscode2session?appid={$appID}&secret={$appSecret}&js_code={$code}&grant_type=authorization_code";
11.             $result = file_get_contents($url);
12.             $data = json_decode($result, true);
13.             // 获取用户openid&&session_key成功
14.             if(isset($data['openid'])){
15.                 // 解密用户手机信息
16.                 $aesKey=base64_decode($data['session_key']);
17.                 $aesIV=base64_decode($iv);
18.                 $aesCipher=base64_decode($encryptedData);
19.                 $result2=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
20.                 // 用户电话号码 $userPhone['phoneNumber']
21.                 $userPhone=json_decode( $result2, true);
22.                
23.                 $phone=$userPhone['phoneNumber'];
24.                 $business=$this->BusinessModel->where('mobile',$phone)->find();
25.                 if($business){
26.                     // 已注册
27.                 }else{
28.                     // 未注册
29.                 }
30.             }else{
31.                 $this->result([],'0','登录失败！','json');
32.             }
33.         } else {
34.             return "缺少 code 参数";
35.         }
36.     }

复制代码

流程实现(前端)(Vue)(uniapp)

1. //html
2. <button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
3.         手机号快捷登录
4. </button>
6. //js
7. getPhoneNumber(e) {
8.         wx.login({
9.         success: (res) => {
10.                 this.userInfo.code = res.code
11.                 this.userInfo.mobileEncryptedData = e.detail.encryptedData
12.                 this.userInfo.mobileIv = e.detail.iv
13.                 this.login()
14.         },
15.         fail() {
16.                 this.m_Toast('获取code失败')
17.                 }
18.         })
19. }
20. login() {
21.     this.$api.user.wx_login(this.userInfo).then(res => {
22.                 if (res.code == 1) {
23.                         uni.setStorageSync('userInfo', res.data);
24.                                 uni.showToast({
25.                                         title: res.msg,
26.                                         icon: 'success',
27.                                         duration: 1000
28.                                 })
29.                                 //其他处理
31.                 } else {
32.                          uni.showToast({
33.                                 title: res.msg,
34.                                 icon: 'error',
35.                                 duration: 1500
36.                         })
37.                 }
38.         })
39. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。