经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
小程序实现授权登陆的解决方案
来源:jb51  时间:2018/12/3 14:32:15  对本文有异议

前言

之前写过一个关于微信授权登陆的文章

传送门

最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌糊涂以后再慢慢的改进

场景

  • 微信用户可以通过搜索进入小程序
  • 也可以通过别人分享进入小程序
  • 进入小程序之后需要用户授权拿到用户信息进行注册

代码实现

初始化页面home页用户第一次进入小程序必须授权后台注册并登陆

app.json

  1. {
  2. "pages": [
  3. "pages/home/index",
  4. "pages/login/index",
  5. ...
  6. ]
  7. }

login.js逻辑进入页面判断一下是不是授权过,判断用户是否已经授权,已经授权显示登陆,没有授权显示授权,用户无论是注册还是登陆用的是后台提供的同一个接口。返回token存在本地

login.js

  1. const App = getApp()
  2. import { loginModel } from '../../models/login.js'
  3. import { MineModel } from '../../models/mine.js'
  4. import { encodeUnicode } from '../../utils/index.js'
  5. const ModelLogin = new loginModel()
  6. const Modelmine = new MineModel()
  7. Page({
  8. data: {
  9. logged: !1,
  10. isauth: false,
  11. locked: false
  12. },
  13. onLoad: function(options) {
  14. // 返回到之前要刷新
  15. var pages = getCurrentPages() // 获取页面栈
  16. var prevPage = pages[pages.length - 2] // 前一个页面
  17. prevPage.setData({
  18. isBack: true
  19. })
  20. },
  21. onShow: function() {
  22. // 如果已经授权则显示登录,直接登录不调用授权
  23. App.WxService.getSetting().then(res => {
  24. if (res.authSetting['scope.userInfo']) {
  25. this.setData({
  26. isauth: true
  27. })
  28. }
  29. })
  30. //token 不能在page外面定义,变量写在 page 外面有缓存
  31. const token = App.WxService.getStorageSync('utoken')
  32. // 如果有token显示已经授权
  33. this.setData({
  34. logged: !!token
  35. })
  36. token && setTimeout(this.goBack, 1500)
  37. },
  38. login() {
  39. this.wechatSignUp()
  40. },
  41. goBack() {
  42. // 返回登录之前的页面
  43. wx.navigateBack({
  44. delta: 1
  45. })
  46. },
  47. // 登陆注册
  48. wechatSignUp(cd) {
  49. // 上锁如果正在请求接口那么就返回
  50. if (this.data.locked) {
  51. return
  52. }
  53. this.data.locked = true
  54. //注册或者登陆获取token
  55. let code = ''
  56. App.WxService
  57. .login()
  58. .then(data => {
  59. code = data.code
  60. wx.setStorageSync('logincode', data.code)
  61. return App.WxService.getUserInfo()
  62. })
  63. .then(data => {
  64. // 请求后台登录注册接口
  65. return ModelLogin.wechatSignUp({
  66. encrypteData: data.encryptedData,
  67. iv: data.iv,
  68. rawData: encodeUnicode(data.rawData), // 编码
  69. signature: data.signature,
  70. code: code
  71. })
  72. })
  73. .then(data => {
  74. this.data.locked = false
  75. if (data.data.token == '') {
  76. wx.showToast({
  77. title: '登录失败',
  78. icon: 'none'
  79. })
  80. return
  81. }
  82. App.WxService.setStorageSync('utoken', data.data.token)
  83. // 访问后台接口获取用户信息
  84. ModelLogin.getVipInfo({ token: data.data.token }).then(res => {
  85. App.globalData.userInfo = res.data.userInfo
  86. // 返回上一页
  87. this.goBack()
  88. })
  89. })
  90. .catch(err => {
  91. this.data.locked = false
  92. console.log(err)
  93. })
  94. }
  95. })

这里的App.WxService等价于wx因为wx是回调的方式,这里使用的是promise。

先判断有没有授权,没有授权显示点击授权,有授权显示点击登录,调用的方法都是wechatSignUp,拿到wx.login的code和wx.getUserInfo的数据给后台,然后后台返回token,然后再去访问后台获取用户信息

login的逻辑大概就是这些

login.wxml

  1. <view class="login-container">
  2. <view class="login" wx:if="{{ !logged }}">
  3. <view class="app-info">
  4. <image class="app-logo" src="./s-toplogo@2x.png" />
  5. <text class="app-name">商城</text>
  6. </view>
  7. <view class="alert">
  8. <view class="alert-title" wx:if="{{!isauth}}">请同意授权</view>
  9. <view class="alert-title" wx:if="{{isauth}}">请登录</view>
  10. <view class="alert-desc">
  11. <view class="alert-text">为了让头号买手可以更好的为您服务</view>
  12. </view>
  13. </view>
  14. <button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">确认授权</button>
  15. <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">确认登录</button>
  16. </view>
  17. <view class="logged" wx:else>
  18. <image class="logged-icon" src="./s-toplogo@2x.png" />
  19. <view class="logged-text">近期你已经授权登陆过商城</view>
  20. <view class="logged-text">自动登录中</view>
  21. </view>
  22. </view>

访问后台接口的时候在header里传token如果后台没有拿到token就返回401,前端统一拦截跳转到登陆页面

结束

关于app.js本来打算在app做拦截的,但是异步请求总是在进入页面后才拿到后台返回的数据,因为用户可能从商品详情页等其他页面进入小程序,授权后要返回进入页面,在app.js中拦截就无法返回页面了,所以就直接在页面的js里去判断,还好可以分享的页面不多所以就没有在app.js里写任何东西。第一次接触,希望以后能优化了再发文记录一下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号