无法在这个位置找到: head2.htm
当前位置: 建站首页 > 凡科概况 > 发展历程 >

手机商城网页模板

时间:2020-12-28 22:05来源:手机商城网页模板 作者:jianzhan 点击:
手机商城网页模板:微信小程序授权登录全过程解析(附代码) 今天小编对于微信小程序的登录功能比较感兴趣 也是由于工作需要 就大概研究了一下。 这里先附一张小程序的登陆整体

手机商城网页模板:微信小程序授权登录全过程解析(附代码)

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

整体流程

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

登陆后效果

点赞 评论 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
  • 上一篇:
  • 下一篇:没有了
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信