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

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

整体流程：

微信端点击登录按钮后会去调用 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=thiswx.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.userInfobiaozhi.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/loginpublic 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;}

登陆后效果：

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

微信登录小程序授权显示服务器出错,微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）...
本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ ...
微信小程序授权登录取消授权重新授权处理方法附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...

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

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

最新文章

热门文章