如何用代碼實(shí)現(xiàn)在小程序中接入微信登錄

這篇文章將為大家詳細(xì)講解有關(guān)如何用代碼實(shí)現(xiàn)在小程序中接入微信登錄，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

Authing 通過 SDK 為開發(fā)者提供了一種快速在小程序中獲取用戶信息并完成登錄的方法。通過 Authing 的 SDK 可以方便地獲取微信提供的用戶身份標(biāo)識，快速建立以手機(jī)號碼為基礎(chǔ)的賬號體系。

• 應(yīng)用場景：小程序；

• 概述：在微信小程序內(nèi)使用，彈出微信授權(quán)框，用戶授權(quán)之后可以獲取當(dāng)前用戶的信息；

• 查看微信官方文檔。

第一步：在微信公眾平臺創(chuàng)建一個小程序

請前往微信公眾平臺指引創(chuàng)建一個微信小程序，你需要記錄下該應(yīng)用的App ID和App Secret，后面需要用到。如果你需要獲取用戶手機(jī)號，需要通過微信認(rèn)證。并將 core.authing.cn 加入微信的 request 合法域名。

第二步：在 Authing 控制臺配置微信小程序應(yīng)用

在控制臺的社會化登錄配置頁面，找到微信小程序應(yīng)用，填入以下配置：

• App ID: 小程序應(yīng)用 ID；

• App Secret: 小程序應(yīng)用密鑰。

配置完成后請點(diǎn)擊「確定」保存信息。

第三步：開始開發(fā)接入

從小程序基礎(chǔ)庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包，詳情請見:npm 支持 | 微信開放文檔。

安裝 npm 包

使用 npm:

npm install authing-wxapp-sdk

或者使用 yarn:

yarn add authing-wxapp-sdk

點(diǎn)擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm:

勾選「使用 npm 模塊」選項(xiàng)：

初始化 SDK

AuthenticationClient 初始化需要傳入AppId （應(yīng)用 ID）：

你可以在控制臺的應(yīng)用中查看自己的應(yīng)用列表。

const { AuthenticationClient } = require("authing-wxapp-sdk");

const authing = new AuthenticationClient({
  appId: "YOUR_APP_ID",
});

調(diào)用登錄方法

const { code } = await wx.login()
// 無需用戶授權(quán)
const user = await authing.loginByCode(code); // 成功登錄，將 token 寫入微信 Storage

// 登錄之后可以進(jìn)行此操作
await authing.updateProfile(
  nickname: 'Bob'
)

在用戶完成登錄之后，SDK 會將用戶的 token 寫入到微信的 Storage 中，后續(xù)請求會自動攜帶 token 訪問。

后續(xù)用戶再次打開小程序，如果小程序的 Storage 中保存有用戶的 token，訪問 authing 的請求將會自動帶上該 token。

// 該請求可以成功，因?yàn)樵撚脩舫鲇诘卿洜顟B(tài)。
await authing.updateProfile(
  nickname: 'Mick'
)

接下來

獲取到用戶信息之后，你可以得到用戶的身份憑證（用戶信息的 token 字段），你可以在客戶端后續(xù)發(fā)送給后端服務(wù)器的請求中攜帶上此 token, 以 axios 為例：

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer YOUR_JWT_TOKN",
    },
  })
  .then((res) => {
    // custom codes
  });

在后端接口中需要檢驗(yàn)此 token 的合法性，來驗(yàn)證用戶的身份，驗(yàn)證方式詳情請見文檔「驗(yàn)證用戶身份憑證（token）」。識別用戶身份之后，你可能還需要對該用戶進(jìn)行權(quán)限管理，以判斷用戶是否對此 API 具備操作權(quán)限。

關(guān)于如何用代碼實(shí)現(xiàn)在小程序中接入微信登錄就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。