[Applet] Use uni-app to build applet environment-login process WeChat applet authorized login

WeChat applet authorization can generally obtain the user's openid, nickname, avatar, user's province and city, gender

 

① First, guide the user to click the authorization button

1
<button open-type= "getUserInfo"  bindgetuserinfo= "bindGetUserInfo" >点击授权</button>

 

②, and then write the bindGetUserInfo function:

1
2
3
4
5
6
7
8
   bindGetUserInfo(res) {
     console.log(res);
     if  (res.detail.userInfo) {
       console.log( "点击了同意授权" );
     else  {
       console.log( "点击了拒绝授权" );
     }
}

 

③ A pop-up box will appear at this time,

  

 

④, click Allow will return the user's basic information except for openid:

 

⑤ Next, we need to use WeChat's wx.login function to get the user's openid

1
2
3
4
5
6
7
8
9
10
11
12
bindGetUserInfo(res) {
   let info = res;
   if  (info.detail.userInfo) {
     console.log( "点击了同意授权" );
     wx.login({
       success:  function  (res) {
         console.log(res);
       }
     })
   else  {
     console.log( "点击了拒绝授权" );
   }  

At this time, WeChat will return a temporary login credential code, only to obtain this code can further obtain openid and session_key

 

⑦, request the server backend, let the backend request WeChat and return openid and session_key, and then use WeChat's local cache to save the user's basic information

The official documentation suggests that the session key session_key is the key used to encrypt and sign user data. In order to apply its own data security, the developer server should not issue the session key to the applet, nor should it provide this key externally

Request front-end code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
bindGetUserInfo(res) {
     let info = res;
     console.log(info);
     if  (info.detail.userInfo) {
       console.log( "点击了同意授权" );
       wx.login({
         success:  function  (res) {
           if  (res.code) {
             wx.request({
               url:  'http://www.test.com/test' ,
               data: {
                 code: res.code,
                 nickName: info.detail.userInfo.nickName,
                 city: info.detail.userInfo.city,
                 province: info.detail.userInfo.province,
                 avatarUrl: info.detail.userInfo.avatarUrl
               },
               header: {
                 'content-type' 'application/json'  // 默认值
               },
               success:  function  (res) {
                   var  userinfo = {};
                   userinfo[ 'id' ]=res.data.id;
                   userinfo[ 'nickName' ] = info.detail.userInfo.nickName;
                   userinfo[ 'avatarUrl' ] = info.detail.userInfo.avatarUrl;
                   wx.setStorageSync( 'userinfo' , userinfo);                    
               }
             })
           else  {
             console.log( "授权失败" );
           }
         },
       })
 
     else  {
       console.log( "点击了拒绝授权" );
     }
   }           

 

请求后台代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public  static  $appid = '你的appid' ;
public  static  $secret = '你的密钥' ;
 
public  function  test()
{
     $params =Request::instance()->param();
     $url = "https://api.weixin.qq.com/sns/jscode2session?appid=" .self:: $appid . "&secret=" .self:: $secret . "&js_code=" . $params [ 'code' ]. "&grant_type=authorization_code" ;
     $data = $this ->doCurl( $url );
     $info [ 'openid' ]= $data ->openid;   //获取到用户的openid
     $info [ 'avatar' ]= $params [ 'avatarUrl' ];
     $info [ 'province' ]= $params [ 'province' ];
     $info [ 'city' ]= $params [ 'city' ];
     $info [ 'nickName' ]= $params [ 'nickName' ];
     return  json([ 'status' =>1]);
}
 
 
public  function  doCurl( $url )
{
     $curl  = curl_init();
     // 使用curl_setopt()设置要获取的URL地址
     curl_setopt( $curl , CURLOPT_URL,  $url );
     // 设置是否输出header
     curl_setopt( $curl , CURLOPT_HEADER, false);
     // 设置是否输出结果
     curl_setopt( $curl , CURLOPT_RETURNTRANSFER, 1);
     // 设置是否检查服务器端的证书
     curl_setopt( $curl , CURLOPT_SSL_VERIFYPEER, false);
     // 使用curl_exec()将CURL返回的结果转换成正常数据并保存到一个变量
     $data  = curl_exec( $curl );
     // 使用 curl_close() 关闭CURL会话
     curl_close( $curl );
     return  json_decode( $data );
}

相关资料:

Guess you like

Origin www.cnblogs.com/websmile/p/12148305.html
Recommended