小程序?qū)崿F(xiàn)登錄功能
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)登錄功能的具體代碼，供大家參考，具體內(nèi)容如下
小程序可以通過(guò)微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識(shí)，快速建立小程序內(nèi)的用戶體系。
1、前端調(diào)用wx.login獲取code，再調(diào)用后端接口傳遞code
注意：code是臨時(shí)的，只有5分鐘的使用時(shí)間，而且只能使用一次
2、后端用獲取的code與微信接口服務(wù)換取openid（用戶唯一標(biāo)識(shí)）與session_key（可以用于解密私密信息encrydata，現(xiàn)在只能獲取頭像和昵稱），然后生成一個(gè)自定義登錄狀態(tài)的token，自定義登錄態(tài)與openid和session_keysession關(guān)聯(lián)。
注意：不可以把解析出來(lái)的openid和session_key直接返回給前端，會(huì)造成信息安全問(wèn)題
3、將token返回給前端
4、前端緩存token
5、用戶登錄時(shí)，登錄接口獲取到token，再調(diào)用其他接口時(shí)，攔截器進(jìn)行攔截，如果token有效，則放行請(qǐng)求；如果token失效（不存在、過(guò)期、格式不正確等原因），則無(wú)法訪問(wèn)該接口，需要重新登錄。
說(shuō)明：如果覺得token驗(yàn)證太過(guò)復(fù)雜，也可以退而求其次，采用微信小程序自帶的wx.checkSeesion檢查下發(fā)的session_key是否過(guò)期（固定為兩天）。
wx.checkSeesion是前端檢查，非常方便，但是缺點(diǎn)也很明顯：耗時(shí)長(zhǎng)，通常需要300+ms ，另外前后端傳遞私密數(shù)據(jù)時(shí)，需要額外考慮數(shù)據(jù)安全問(wèn)題（以openid為例，前端每次需要傳遞openid時(shí)，都需要先獲取臨時(shí)code，再傳遞給后端，后端再用code換取openid，開銷極大），因此正式開發(fā)時(shí)極不建議使用wx.checkSeesion，token驗(yàn)證方式可以較好解決上述問(wèn)題。
核心代碼：
// pages/my/my.js
Page({
? ? /**
? ? ?* 頁(yè)面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? loginOk: false,
? ? ? ? userInfo: null
? ? },
? ? /**
? ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ? ?*/
? ? onLoad: function (options) {
? ? ? ? //驗(yàn)證是否登錄
? ? ? ? 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ā)者每次通過(guò)該接口獲取用戶個(gè)人信息均需用戶確認(rèn)，開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
? ? ? ? wx.getUserProfile({
? ? ? ? ? ? desc: '展示用戶信息', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫
? ? ? ? ? ? success(res){
? ? ? ? ? ? ? ? const userInfo = res.userInfo
? ? ? ? ? ? ? ? console.log(userInfo)
? ? ? ? ? ? ? ? // 登錄
? ? ? ? ? ? ? ? wx.login({
? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? if (res.code) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //發(fā)起網(wǎng)絡(luò)請(qǐng)求
? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url: 'http://127.0.0.1:3000/getSession',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? code: res.code,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? userInfo:userInfo
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 將token保存到數(shù)據(jù)緩存（下次打開小程序無(wú)需重新獲取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'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? }
})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)于不同類型的需要重復(fù)計(jì)算的問(wèn)題，循環(huán)和遞歸兩種方法各有所長(zhǎng)，能給出更直觀簡(jiǎn)單的方案，下面為大家詳細(xì)的介紹下JavaScript的遞歸與循環(huán)，感興趣的朋友可以了解下2013-08-08
JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄顯示時(shí)間的方法,涉及JavaScript針對(duì)時(shí)間及狀態(tài)欄操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
廣告代碼靜態(tài)化js通用函數(shù)...2007-05-05
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)（函數(shù)節(jié)流）
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)問(wèn)題（函數(shù)節(jié)流）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
CocosCreator通用框架設(shè)計(jì)之網(wǎng)絡(luò)
這篇文章主要介紹了CocosCreator通用框架設(shè)計(jì)之網(wǎng)絡(luò)，詳細(xì)講解了WebSocket的原理和使用方法，對(duì)WebSocket感興趣的同學(xué)，一定要看一下2021-04-04
用過(guò) Google 地圖的人可能都很熟悉，通過(guò)滾動(dòng)滾輪可以對(duì)地圖進(jìn)行縮放，非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來(lái)不錯(cuò)的用戶體驗(yàn)。2010-03-03
基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
這篇文章主要為大家詳細(xì)介紹了HTML5本地圖片裁剪并上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
Javascript Function.prototype.bind詳細(xì)分析
這篇文章主要介紹了Javascript Function.prototype.bind詳細(xì)分析的相關(guān)資料,需要的朋友可以參考下2016-12-12
定時(shí)器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
setInterval()方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式，詳細(xì)使用方法可以參考下本文2013-03-03