亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

首頁 微信小程式 小程式開發(fā) 介紹微信小程式開發(fā)之用戶授權登入

介紹微信小程式開發(fā)之用戶授權登入

Apr 08, 2021 am 10:34 AM

介紹微信小程式開發(fā)之用戶授權登入

本篇將協(xié)助讀者實現(xiàn)基於 微信開發(fā)者工具 & C#環(huán)境 下的使用者在小程式上的授權登陸。

準備:

微信開發(fā)者工具下載網(wǎng)址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

#微信小程式開發(fā)文件:https://developers.weixin.qq.com/miniprogram/dev/index.html

開發(fā):

在開發(fā)之初,我們需要先明確微信方已經(jīng)制定好的授權登陸流程,請參閱官方API - 登陸介面。

你會看到微信方為開發(fā)者制定好的登陸授權流程:

#?

如圖,即為一個順向的使用者登陸授權的流程。

為什麼說它是一個順從的流程呢?因為在真正的小程式開發(fā)中,我們並不確定使用者何時需要起調(diào)如上的登陸流程(如:使用者在某些特定場景下的憑證遺失,但Ta並沒有退出小程式而是在小程式內(nèi)部做跳轉(zhuǎn)等相關操作,即有可能導致一些預期之外的異常),所以,我們需要在這個順向的流程之外,加一層檢測機制,來解決這些異常場景,而官方API中,wx .checkSession 剛好可以一定程度上解決這個問題。

那麼,我們的認證流程其實應該是:

-?小程式wx.checkSession 校驗登陸態(tài)為失效

????-?success :介面呼叫成功的回呼函數(shù),session_key未過期,流程結(jié)束;? ??

????-?fail :

#????-?

fail :

介面呼叫失敗的回呼函數(shù),session_key已過期

#? ? ????-》 小型程式端wx.login 取得code 並wx.request 提交code給己方伺服器

????????-》 己方伺服器提交#id appSecret 取得微信方伺服器

????????-》 己方伺服器根據(jù)?session_key & openid? 產(chǎn)生3rd_session(

微信方提出的基於安全性的考慮,建議開發(fā)者不要將openid等關鍵性資訊進行資料傳輸端

????????-》 小程式端wx.setStorage 儲存 3rd_session ( 後續(xù)使用者操作需要憑證時附帶此參數(shù))

??????服務3rd_session 資料後,一併wx.request 提交給己方伺服器

?????????-》己方伺服器SQL使用者資料資訊更新,流程結(jié)束;

#思考整理完畢,接下來實作流程##SQL 使用者資料資訊更新,流程結(jié)束;

思考整理完畢,接下來實作流程」 ##小程式端:

在小程式中,新建一個通用的JS做基礎支援

#並在一些需要引用的頁面進行引用

var common = require("../Common/Common.js")

接著,在Common.js 中實作邏輯

//用戶登陸
function userLogin() {
  wx.checkSession({
    success: function () {
      //存在登陸態(tài)
    },
    fail: function () {
      //不存在登陸態(tài)
      onLogin()
    }
  })
}

function onLogin() {
  wx.login({
    success: function (res) {
      if (res.code) {
        //發(fā)起網(wǎng)絡請求
        wx.request({
          url: 'Our Server ApiUrl',
          data: {
            code: res.code
          },
          success: function (res) {
            const self = this
            if (邏輯成功) {
              //獲取到用戶憑證 存儲 3rd_session 
              var json = JSON.parse(res.data.Data)
              wx.setStorage({
                key: "third_Session", 
                data: json.third_Session
              })
              getUserInfo()
            }
            else {

            }
          },
          fail: function (res) {

          }
        })
      }
    },
    fail: function (res) {
  
    }
  })

}

function getUserInfo() {
  wx.getUserInfo({
    success: function (res) {
      var userInfo = res.userInfo
      userInfoSetInSQL(userInfo)
    },
    fail: function () {
      userAccess()
    }
  })
}

function userInfoSetInSQL(userInfo) {
  wx.getStorage({
    key: 'third_Session',
    success: function (res) {
      wx.request({
        url: 'Our Server ApiUrl',
        data: {
          third_Session: res.data,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl,
          gender: userInfo.gender,
          province: userInfo.province,
          city: userInfo.city,
          country: userInfo.country
        },
        success: function (res) {
          if (邏輯成功) {
            //SQL更新用戶數(shù)據(jù)成功
          }
          else {
            //SQL更新用戶數(shù)據(jù)失敗
          }
        }
      })
    }
  })
}

至此,小程式端的流程基本上實作完畢,接著實作己方服務API

Login 介面邏輯範例

 if (dicRequestData.ContainsKey("CODE"))
        {
            string apiUrl = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", ProUtil.SmartAppID, ProUtil.SmartSecret, dicRequestData["CODE"]);
        
            HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(apiUrl);
            myRequest.Method = "GET";
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
            StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
            string content = reader.ReadToEnd();
            myResponse.Close();
            reader.Close();
            reader.Dispose();

            //解析
            userModel ReMsg = JSONUtil.JsonDeserialize<userModel>(content); //解析
            if ((!string.IsNullOrWhiteSpace(ReMsg.openid)) && (!string.IsNullOrWhiteSpace(ReMsg.session_key)))
            {
                // 成功 自定義生成3rd_session與openid&session_key綁定并返回3rd_session

            }
            else
            {
                // 錯誤 未獲取到用戶openid 或 session
            }
        }
        else
        {
            // 錯誤 未獲取到用戶憑證code
        }

UserInfoUpdate 介面在此不加贅述,使用者根據(jù)自身狀況對資料進行操作即可,微信方呼叫成功時傳回的相關參數(shù)資訊如下

至此,完成了小程式基本的授權登陸及使用者資訊的取得。

最後的最後,是從別人那裡學來的賺零錢小套路~ 賞點小錢鼓勵一下我吧!?! !?

認真看完以上所有後

#有啥不懂的歡迎留言問題~註:以上內(nèi)容有刪減,僅保留通用內(nèi)容。在具體專案中必定存在部分邏輯需要調(diào)整,引鑑的同學請注意相關免費學習推薦:

###微信小程式開發(fā)### ##########

以上是介紹微信小程式開發(fā)之用戶授權登入的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權的內(nèi)容,請聯(lián)絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72