小程序實現(xiàn)登錄功能

更新時間：2022年09月08日 15:35:17 作者：沐小俠

這篇文章主要為大家詳細介紹了小程序實現(xiàn)登錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序實現(xiàn)登錄功能的具體代碼，供大家參考，具體內(nèi)容如下

小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識，快速建立小程序內(nèi)的用戶體系。

1、前端調(diào)用wx.login獲取code，再調(diào)用后端接口傳遞code

注意：code是臨時的，只有5分鐘的使用時間，而且只能使用一次

2、后端用獲取的code與微信接口服務換取openid（用戶唯一標識）與session_key（可以用于解密私密信息encrydata，現(xiàn)在只能獲取頭像和昵稱），然后生成一個自定義登錄狀態(tài)的token，自定義登錄態(tài)與openid和session_keysession關聯(lián)。

注意：不可以把解析出來的openid和session_key直接返回給前端，會造成信息安全問題

3、將token返回給前端

4、前端緩存token

5、用戶登錄時，登錄接口獲取到token，再調(diào)用其他接口時，攔截器進行攔截，如果token有效，則放行請求；如果token失效（不存在、過期、格式不正確等原因），則無法訪問該接口，需要重新登錄。

說明：如果覺得token驗證太過復雜，也可以退而求其次，采用微信小程序自帶的wx.checkSeesion檢查下發(fā)的session_key是否過期（固定為兩天）。

wx.checkSeesion是前端檢查，非常方便，但是缺點也很明顯：耗時長，通常需要300+ms ，另外前后端傳遞私密數(shù)據(jù)時，需要額外考慮數(shù)據(jù)安全問題（以openid為例，前端每次需要傳遞openid時，都需要先獲取臨時code，再傳遞給后端，后端再用code換取openid，開銷極大），因此正式開發(fā)時極不建議使用wx.checkSeesion，token驗證方式可以較好解決上述問題。

核心代碼：

// pages/my/my.js
Page({

? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? loginOk: false,
? ? ? ? userInfo: null
? ? },

? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ? ?*/
? ? onLoad: function (options) {
? ? ? ? //驗證是否登錄
? ? ? ? this.checklogin()
? ? },
? ? checklogin() {
? ? ? ? const token = wx.getStorageSync('token')
? ? ? ? const that = this
? ? ? ? if (token) {
? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3000/checklogin',
? ? ? ? ? ? ? ? method: 'get',
? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? token:token
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? that.setData({?
? ? ? ? ? ? ? ? ? ? ? ? loginOk: res.data.is_login,
? ? ? ? ? ? ? ? ? ? ? ? userInfo: res.data.userInfo
? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? that.setData({ loginOk: false })
? ? ? ? }
? ? },
? ? login() {
? ? ? ? const that = this
? ? ? ? // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
? ? ? ? wx.getUserProfile({
? ? ? ? ? ? desc: '展示用戶信息', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
? ? ? ? ? ? success(res){
? ? ? ? ? ? ? ? const userInfo = res.userInfo
? ? ? ? ? ? ? ? console.log(userInfo)
? ? ? ? ? ? ? ? // 登錄
? ? ? ? ? ? ? ? wx.login({
? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? if (res.code) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //發(fā)起網(wǎng)絡請求
? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3000/getSession',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? code: res.code,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? userInfo:userInfo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 將token保存到數(shù)據(jù)緩存（下次打開小程序無需重新獲取token）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.setStorageSync('token', res.data.token)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? that.setData({?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? loginOk: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? userInfo: userInfo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
? ? //退出登錄
? ? exit() {
? ? ? ? wx.showModal({
? ? ? ? ? ? content: "確定退出嗎"
? ? ? ? }).then(res => {
? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? loginOk: false
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? //清空登錄的緩存
? ? ? ? ? ? ? ? wx.removeStorageSync('token')
? ? ? ? ? ? } else if (res.cancel) {
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? title: '取消',
? ? ? ? ? ? ? ? ? icon:'error'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: