uniapp上如何實作小程式的微信登入功能（流程摘要）

uniapp上如何實作小程式的微信登入功能？以下這篇文章跟大家分享一下uniapp上小程式的微信登入功能的具體操作流程，希望對大家有幫助！

之前寫過一篇介紹uniapp開發微信登入功能，那是個安卓app版本，今天介紹下在小程式上如何實作微信登入，那篇文章沒有說到微信登入服務端介面這塊，這篇文章裡會提到具體的介面設計及表結構設計想法。相較於app，在微信小程式上實現微信登入還是比較方便的，因為少了應用id的生成過程，不過前提也是要有一個微信開放平台，如果沒有的話要到官網註冊一個帳號。

接下來就講下步驟，流程比較簡單，需要注意一點的就是，每個小程序都是用郵箱註冊的，而且一個郵箱只能綁定一個小程序，所以一個人擁有的郵箱數直接限制了一個人擁有的小程式數量。

1、註冊開放平台

這一步跟前面app的那個app微信登入功能方法一樣的，網路上有教程，註冊流程還有點麻煩，要用到企業訊息，這裡只是提一下，註冊一個開放平台就夠用了，能滿足app、小程式、公眾號、網站等等共用，我只是為了這篇文章又提到了，畢竟文章雖小，五髒要全。

2、開發者資質認證

這跟之前是一樣的，因為在開放平台上的開發者資質認證通過之後，就給你開放了app、小程式、公眾號、網站等各平台的微信開放功能權限，而且每個還能加多個，像小程式可以加50個。這麼算起來的話，這300塊還是有點價值的。

3、加入小程式到開放平台

#這裡填小程式的相關資訊就可以了，下一步需要微信掃碼，沒太明白這個掃碼是什麼意思，因為郵箱跟微信關係不大，掃碼後小程式就成功綁定到開放平台了。

點擊查看進去看下，發現內容非常少。

這裡跟app綁定到開放平台完全不同，其實也好理解，因為這畢竟是微信小程序，那微信小程序掛載到微信上本來就要基於微信的基礎權限，所以意思是說微信小程式你直接可以用微信的幾乎所有功能了，只要你能開發出來，show me the code 就行了。

4、取得AppSecret

在開發管理，開發設定裡可以得到小程式金鑰，這個得到後就自己儲存下，系統不幫你明文儲存，如果後期丟了，你可以重置生成。金鑰在一般的小程式業務中用不到，只有在做微信開放功能(登入、分享等)時才會用到。

5、微信登入業務設計

微信登入的業務在一般的網路產品上就是有註冊、登入功能，但是在非網路產品上，一般不會讓一般微信用戶註冊的，都要是本應用程式上註冊的用戶。所以這個登錄，需要將普通用戶與微信帳號綁定。

業務流程依然是微信登入功能中這張圖裡的業務：

那問題來了，如何實現登入呢? 這篇文章重點就要講清楚上圖中登入這塊的具體內容。

這裡有張微信官方的登入業務設計圖，可以理解下，這個圖對於剛開始做的人來說有點複雜，不要緊，可以按我下面分析的來就大概知道思路了吧。

以下是我結合專案實際狀況的具體的業務分析， 具體內容分前後端兩塊來說：

前端業務

例如小明在手機上用微信登錄，他如果是首次登錄，就要用一個系統帳號綁定，例如admin帳號，他得完成兩步驟操作：1、微信授權並獲取微信帳號資訊；2、微信帳號綁定係統帳號；

第一步，取得微信帳號信息，簡單總結就是先獲得使用者授權，再用開發者AppID及AppSecret呼叫特定的登入介面得到使用者資訊及openid等資訊。

第二步，拿到這些資訊後，還要回到前端介面，再給一個登入操作介面，這一步，是用來輸入系統使用者名稱及密碼的。

後端業務

第二步操作在一個新用戶訪問這個app時必須走的一步，這一步之後，系統用戶帳號資訊和目前使用者的微信資訊(openid)就可以同時傳到後台，登入介面除了常規登入驗證，還要匹配這個openid,全對了才能登入成功。系統帳號與openid是一對多的關係，這很容易理解，就是admin帳號，可以讓多個微信使用者登入。當然，如果目前微信用戶是第一次登錄，那麼在登入時就要插入一條目前微信用戶與系統帳號的綁定資訊。

前端這塊的業務，其實可以把微信登入這塊進行業務封裝，也做成服務後置來調用，因為AppID及AppSecret這些資訊比較敏感，最好放後端儲存。

登入業務實作

1、登入授權並取得暫存憑證code

#下面貼出了程式碼，我具體分析下思路。微信登入要彈出授權頁面，視圖層程式碼有特殊格式，得這麼寫"",然後在觸發按鈕事件方法時才會彈出授權頁面，授權後再調用uni.login這個api，這一步是取得code，code相當於一個憑證，是暫時的，每次呼叫都不同。前端拿到這個憑證，到後端呼叫服務端介面'wxlogin'

<button id="btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"></button>

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: &#39;weixin&#39;,
					success: function(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								method: &#39;POST&#39;,
								url: &#39;http://************/wxlogin&#39;,
								data: {
									code: res.code
								},
								success(res) {
									//将openid存入本地缓存
									uni.setStorage({
										key: &#39;openid_key&#39;,
										data: res.data.openid
									});
									if (res.statusCode == 200 && res.data && res.data.username) {
										self.isFirstWXLogin = false;
										self.name = res.data.username;
										self.password = res.data.password;
										setTimeout(function() {
											self.tologin({
												username: res.data.username,
												password: res.data.password,
												encrypted: true
											})
										}, 0)
									} else {
										//首次登录，可以跳转到一个绑定账号的页面
										uni.navigateTo({
											url: &#39;wxlogin&#39;
										});
								}
							})
						} else {
							console.log(&#39;登录失败！&#39; + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e);
					}
				});
			}

#2、微信登入並取得使用者唯一識別

這一步放在服務端，我用node寫的接口，提供你參考下：

router.post("/wxlogin", (req, res, next) => {
    //将请求地址的url后面的参数拼接起来
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查询
    var content = querystring.stringify(data);
    // 根据微信开发者文档给的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 对url发出一个get请求
    request({
        'url': url
    }, (error, response, body) => {
        // 将body的内容解析出来
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根据openid查找用户，如果查到则返回用户名密码登录，否则直接提示登录
        getAllUsers(abody, res)
    })
})

上面的程式碼僅供參考，思路就是用appId、appSecret(這兩個在後端配置，或者存在數據庫)及前端傳過來的code參數，呼叫介面'api.weixin.qq.com/sns/jscode2…

3、前端存入使用者資訊到本地快取

#這一步在授權後就可以呼叫了，這個根據你實際需要來，可以不要，我用這個來存頭像、微信呢稱之類的。 uni相關api不熟的可以先讀出api文檔。

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});

好了，小程式登入的基本步驟到這裡就結束了，希望有幫到你，如果有用就點個讚吧，謝謝！

推薦：《uniapp教學》

以上是uniapp上如何實作小程式的微信登入功能（流程摘要）的詳細內容。更多資訊請關注PHP中文網其他相關文章！