微信小程序授权登录全过程解析（附代码）

最新推荐文章于 2025-10-22 14:55:04 发布

原创最新推荐文章于 2025-10-22 14:55:04 发布 · 8.3k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细解析了微信小程序的登录流程，从用户点击登录按钮开始，到获取code值，再到服务器端换取OpenID和session_key的过程。介绍了如何利用wx.login和wx.getUserInfo接口，以及服务器端如何使用auth.code2Session接口。

今天小编对于微信小程序的登录功能比较感兴趣，也是由于工作需要，就大概研究了一下。
这里先附一张小程序的登陆整体流程图。
在这里插入图片描述
整体流程：

微信端点击登录按钮后会去调用 wx.login接口，如果接口调用成功，它会返回一个code值。我们就把这个code值放到缓存中，以变以后来调用。
与此同时，微信端调用wx.getUserInfo去获取用户的基本信息，包括nickname、avatarUrl等。用以显示在页面上。
获取到code值后，微信端会调用wx.request接口，发起网络请求，到服务器端。
服务器端接收到请求后，会去调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和会话密钥 session_key。
服务器端获取到OpenID和session_key之后会返回到微信端一个自定义登录态，这个可以是一个字符串，也可以是一个对象，有自己决定。
微信端通过wx.request接口接收到这个自定义登录态的信息后，也将这个自定义登录态存到缓存中，以变后面业务的身份确认。
至此，登录流程才真正的结束了。

这是还没有登陆的界面
在这里插入图片描述
index.wxml

<view>
  <!-- 页面头部-->
  <view class="userinfo">
     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击登录 </button>
    <block wx:else>
      <view class="userinfo-nickname">
        <view class="TopTitle">{{userInfo.nickName}}</view>
        <view style="color:{{color}}" class="TopSubtitle">{{TopText}}</view>
      </view>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <image class="TopArrow" src="{{'/pages/image/right.png'}}" mode="heightFix"></image>
 
</view>

index.js

getUserInfo: function(e) {
    let biaozhi=this
    wx.login({
      success (res) {
        //res.code可以理解为是一个字符串
        console.log(res.code)
        wx.setStorage({
          key:"code",
          data:res.code
        })
        wx.getUserInfo({
          success:function(e){
              console.log(e.userInfo)
             app.globalData.userInfo=e.userInfo
             biaozhi.setData({
               userInfo:e.userInfo,
               hasUserInfo:true
               
             })
             //console.log(biaozhi.userInfo)
            if (res.code) {
              //发起网络请求
              wx.request({
                url: '自己写的api',
                data: {
                  code: res.code
                },
                header:{
                  'content-type':'application/json'//默认值
                },
                method:'GET',
                success(ress) {
                  console.log(ress);
                 
                  wx.setStorage({
                    key:"session_id",
                    data:ress.data.session_key
                  })
                  wx.setStorage({
                    key:"openid",
                    data:ress.data.openid
                  })
                }
              })
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          },
          fail:function(e){
            console.log("有大问题")
          }  
                 
        })
        
      }
    })
  },

[HttpGet]
        //GET api/values/login
        public Object Login(string code)
        {
            //获取临时登陆凭证
            string js_code = code;
            string serviceAddress = "https://api.weixin.qq.com/sns/jscode2session?appid=" + "自己的appid" + "&secret=" + "自己的密匙" + "&js_code="
                                        + js_code + "&grant_type=authorization_code";
            //进行接口通信获取值
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(serviceAddress);
            request.Method = "GET";
            request.ContentType = "text/html;charset=utf-8";
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream myResponseStream = response.GetResponseStream();
            StreamReader myStreamReader = new StreamReader(myResponseStream, System.Text.Encoding.UTF8);
            string jsonData = myStreamReader.ReadToEnd();
            myStreamReader.Close();
            myResponseStream.Close();
            string jsonString = jsonData;
            JObject json = JObject.Parse(jsonString);
            string openid = json["openid"].ToString();
            return json;
        }

登陆后效果：
在这里插入图片描述