微信小程序授权登录

小灰灰 2022-10-23 08:26 295阅读 0赞

## 微信的详细登录流程如下 图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDA4NTA4OQ_size_16_color_FFFFFF_t_70_pic_center]

前言  
首先 要明白 授权登录是为了什么 ？  
授权登录是为了要获取用户得信息、昵称、以及头像id，如果没有授权登录，用户无法正常使用小程序软件

微信小程序 是授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗

一、 怎么使用 getUserInfo  
使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息  
就是 通过点击按钮 触发 getUserInfo 接口 获取用户信息  
用户一点击 授权登录 就可以获取到 用户的信息了

<button type='primary' open-type='getUserInfo'>授权登录</button>
     
    	
    		<view class="My_warpper_top">
    			<view class="My_warpper_top_avatar">
    				<view class="image">
    					<open-data type="userAvatarUrl"></open-data>
    				</view>
    		
    			</view>
    			<view class="My_warpper_top_right">
    				<text>
    					用户ID：{
       {UseId}}
    				</text>
    				<view>
    					<open-data type="userNickName"></open-data>
    				</view>
    			</view>
    		</view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDA4NTA4OQ_size_16_color_FFFFFF_t_70_pic_center 1]

登录的时候 还需要调用一下 **wx.login()** 方法  
调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session\_key）等。用户数据的加解密通讯需要依赖会话密钥完成

wx.login({
            timeout: 10000,
            success: async (result) => {
               console.log(result);
              // console.log(result.code);
              let { data } = await request("接口", {
                autoReg: true,
                code: result.code,
              })
              app.globalData.info = data.data
              // console.log(data);
              
              this.setData({
                UseId: app.globalData.info.uid,
              })
    
              console.log(this.data);
    
    
    
            },
            fail: () => { },
            complete: () => { }
          });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDA4NTA4OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/f00f46c1760b43889ee26c850850f5ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDA4NTA4OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/5165a2c65b2b40109ce77cb2faaab157.png