uniapp開發(fā)微信登錄功能(安卓app)

微信開放平臺提供了微信的一些開放接口，比如微信登錄、分享支付等，為其他各平臺應(yīng)用提供支持服務(wù)。網(wǎng)上資料比較松散，加上一些陌生概念，使得簡單流程并沒有串連起來，本文總結(jié)了uniapp上實現(xiàn)安卓app微信登錄的權(quán)限申請、開發(fā)的具體操作流程，希望對你有用。

首先來看下開發(fā)微信登錄功能的整體流程，我梳理了一個總流程圖，幫助你在理解后面的內(nèi)容時更有條理：

可以看出來，開發(fā)一個微信登錄還是有點麻煩的呀，下面來讓我一步步地詳細(xì)介紹吧！

1、注冊一個微信開放平臺賬號

首先注冊一個微信開放平臺[1]賬號，微信的平臺一共有4個，這個開放平臺就是開放微信的登錄分享支付等內(nèi)容給app、網(wǎng)頁、小程序等使用。具體過程就不細(xì)說了，郵箱賬號要注意不要與微信其他地方用到的相沖突就行了。

2、開發(fā)者資質(zhì)認(rèn)證

賬號注冊成功后登錄，要開發(fā)微信登錄這些功能還要進(jìn)行開發(fā)者資質(zhì)認(rèn)證?，F(xiàn)在開放平臺的注冊對個人是開放的，但是開發(fā)者資質(zhì)認(rèn)證只對企事業(yè)單位開放，而且認(rèn)證要交300塊錢。我用的企業(yè)認(rèn)證，申請過程中要用到企業(yè)相關(guān)資質(zhì)證書，資料齊全流程挺快的，兩三天左右可以搞定吧，發(fā)票申請挺慢的，要一個月左右。

3、在開放平臺申請移動應(yīng)用

認(rèn)證成功后，進(jìn)入管理中心，選擇移動應(yīng)用，創(chuàng)建移動應(yīng)用，按步驟來就行了，可能唯一會讓你卡住的就是應(yīng)用簽名了。我走到這一步時完全是懵逼狀態(tài)，不知道啥是應(yīng)用簽名。

4、應(yīng)用簽名生成

看上面的說明，應(yīng)用簽名主要是用來進(jìn)行身份驗證，之所以說是二次校驗，是相對于登錄用戶來說的。一般情況下，你登錄了開放平臺就可以申請了，現(xiàn)在多了這個簽名，你得再折騰一下，證明自己擁有這個應(yīng)用的開發(fā)權(quán)限。一般情況下，安卓的app發(fā)布在小廠大都是用的公共測試證書，現(xiàn)在要生成應(yīng)用簽名就得用自有證書了。有了自有證書，就可以生成微信開放平臺要的這個應(yīng)用簽名了。那這個自有證書怎么來呢？接下來，看看怎么折騰出來這個自有證書和應(yīng)用簽名吧。

生成自有證書

1、安裝jre環(huán)境

jre是java開發(fā)環(huán)境，可以用cmd命令窗口用java命令判斷下當(dāng)前環(huán)境是否有jre，如果提示 「'java' 不是內(nèi)部或外部命令，也不是可運行的程序或批處理文件」，那說明沒有安裝；如果像這樣輸出內(nèi)容就是已經(jīng)安裝過了：

如果沒有安裝就要下載jre安裝包：https://www.oracle.com/java/technologies/javase-downloads.html

安裝好之后，重新打開cmd，再次輸入java就可以看到正常輸出相關(guān)內(nèi)容了。接下來，還要把jre安裝路徑添加到系統(tǒng)環(huán)境變量中：

d:??
set?PATH=%PATH%;"C:\Program?Files\Java\jre1.8.0_201\bin"

用cmd輸入以上命令，第一行意思是切換到d盤，這個目錄隨意，是用來存放接下來會生成的簽名證書的，你可以再建一個文件夾然后cd進(jìn)去?；剀嚭?，在第二行意思是將jre命令添加到臨時環(huán)境變量中，后面的地址根據(jù)你的jre實際安裝地址來。這步之后，后面的操作生成的文件就會生成在當(dāng)前文件夾中。

2、生成簽名證書

上面步驟正常后，就可以輸入下面的keytool -genkey命令就可以生成證書了。這里要注意下，testalias 和 test.keystore中的'test'都是可以修改的，可以替換為自己項目中的名字。

keytool?-genkey?-alias?testalias?-keyalg?RSA?-keysize?2048?-validity?36500?-keystore?test.keystore

回車后，輸入密碼，比如123456，密碼看不見的，不要輸錯了，后面的按提示填就可以了，一般輸入英文或拼音。最后提示是否正確時，不要回車了，輸入y確認(rèn)正確，否則要再重來一次。

確認(rèn)后，又提示密鑰口令，這個直接回車相同就行。

如果提示這個，就把這個指令復(fù)制了粘貼執(zhí)行，輸入前面設(shè)置的口令123456就可以了。

最后在當(dāng)前執(zhí)行命令的文件夾里就能看到應(yīng)用證書了。

生成簽名

前面是生成證書，這一步終于可以生成簽名了。

3、使用自有證書打包

這一步很簡單，用hbuilderx進(jìn)行app云打包，在彈出框中選擇安卓的自有證書打包方式。這個自有證書就是我們剛才生成的證書，興不興奮，我們也是有證書的人了！？下面三欄，別名、密碼都是前面的操作步驟中寫過的，沒忘記就寫上吧，然后選擇證書文件，剩下的都是常規(guī)操作，最后打包就可以了。

4、用簽名生成工具生成簽名

先到微信開放平臺下載簽名生成工具[2]，下載好之后，在手機(jī)端安裝，輸入安卓包名。

這里有坑，要注意下，uniapp的mainfest.json文件配置中，appid必須是'_UNI_'開頭，所以你的配置文件中得是'_UNI_'開頭的，但是打包時的包名跟那個配置又是兩個體系，互不影響，你可以在這里把名字改下，把uni這個頭去掉。因為這個包名后面要跟ios版本一起用，你得跟ios一樣，相信打過包的人應(yīng)該能明白我在說啥。

輸入正確的包名，點擊下面的按鈕就生成了一串id，這個就是——「應(yīng)用簽名」！真是費勁!

5、按開放平臺流程申請應(yīng)用

有了簽名，你就可以按照微信開放平臺的流程申請「移動應(yīng)用」了，就是本文的第二張圖，輸入簽名，一步步走就行。

最后就是這樣子了，代表你提交成功，可以耐心的等了（三天了，沒變化，最后過了七八天才通過，中間按要求修改了兩次）：

等審核通過，就可以申請微信登錄等功能了。

最后要說的一點就是，app或者你資料中提交的相關(guān)域名網(wǎng)站不要給登錄界面，否則可能會審核不通過，因為他們進(jìn)不去，看不了當(dāng)然無法審核。

6、獲取appid和appsecret

移動應(yīng)用的審核通過后，微信登錄功能就會自動開放了，同時開放的還有分享、發(fā)送朋友等功能。同時，你也可以獲取到獲取appid和appsecret，這個我自己保存越來，后面開發(fā)會用到的。

7、微信登錄業(yè)務(wù)流程梳理

uniapp提供了微信登錄api，不過我們首先要清楚微信登錄的流程，因為微信登錄要配合我們系統(tǒng)自身的業(yè)務(wù)。我在這里梳理了一張流程圖，這張圖就是上面總流程圖的一部分，你可以對照參考，輔助你開發(fā)相關(guān)功能。

8、微信登錄服務(wù)api調(diào)用

如果你按照前面的步驟拿到AppId和AppSecret信息，接下來就是按照這個流程來開發(fā)微信登錄功能。在uniapp上開發(fā)app版本的微信登錄功能需要調(diào)用uni的api[6]還有h5+的api[7]。這里就直接給一個示例代碼：

onLoad()?{
?plus.oauth.getServices((services)?=>?{
???this.weixinAuthService?=?services.find((service)?=>?{
?????return?service.id?===?'weixin'
???})
??});
},
methods:?{
?appWxLogin()?{
??var?self?=?this;
??this.weixinAuthService.authorize(function(res)?{
???//支持微信、qq和微博等
???uni.login({
????provider:?'weixin',
????success:?function(loginRes)?{
?????//?微信用戶信息存入本地，后期備用
?????var?auth?=?null;
?????plus.oauth.getServices(function(services)?{
??????auth?=?services.find((service)?=>?{
???????return?service.id?===?'weixin'
??????});
??????try?{
???????uni.setStorageSync('auth_service',?auth)
??????}?catch?{
?
??????}
?????},?function(e)?{
??????console.log(e);
?????});
?????if?(loginRes.authResult)?{
??????let?access_token?=?loginRes.authResult.access_token;
??????let?openid?=?loginRes.authResult.openid;
??????uni.request({
???????method:?'POST',
???????url:?'http://*********/wx-login/appwxlogin',
???????data:?{
????????openid:?openid
???????},
???????success:?(res)?=>?{
????????console.log(res);
????????//將openid存入本地緩存
????????uni.setStorage({
?????????key:?'openid_key',
?????????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?{
?????????//首次登錄，跳轉(zhuǎn)到一個綁定賬號的頁面
?????????uni.navigateTo({
??????????url:?'wxlogin'
?????????});
????????}
???????},
???????fail:?(error)?=>?{
????????console.log(error);
???????},
???????complete:?(e)?=>?{
????????console.log(e);
???????}
??????})
?????}?else?{
?
?????}
????},
????fail(e)?{
?????console.log(e);
????},
????complete(e)?{
?????console.log(e);
????}
???});
??},?function(error)?{
???console.log(error)
??},?{
???scope:?'snsapi_userinfo'
??})
?}
}

注意幾點：?

1、首先取到微信服務(wù)對象this.weixinAuthService。?

2、其次調(diào)用授權(quán)api——authorize，然后再調(diào)用uni.login這個api。?

3、uni.login成功后，如果想取得用戶信息可以調(diào)用uni.getUserInfo，也可以調(diào)用plus.oauth.getServices，后者是h5+的api，前者也是基于后者的封裝。?

4、代碼中這個接口(/wx-login/appwxlogin)是一個本地服務(wù)，具體的業(yè)務(wù)就是把openid帶到用戶表中去查找，如果能找到，說明此用戶綁定過微信，后端返回用戶信息直接登錄；如果沒找到，就返回提示需要輸入用戶名密碼登錄，而且這個登錄過程要帶上openid，最終插入數(shù)據(jù)庫。

這個api調(diào)用與業(yè)務(wù)開發(fā)流程應(yīng)該比較好理解，我這里也不再畫圖了，應(yīng)該都能看明白。好了，uniapp開發(fā)安卓端的微信登錄功能就介紹完了，如果對你有用就點個贊或者幫忙轉(zhuǎn)發(fā)吧！謝謝鼓勵！

參考資料：

1. https://ask.dcloud.net.cn/article/35777
2. https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
3. https://blog.csdn.net/Drothy_qin/article/details/49947823
4. https://www.cnblogs.com/plBlog/p/13066644.html
5. https://docs.qq.com/doc/DRHJjS0RHRGFHdnly
6. https://uniapp.dcloud.io/api/plugins/login
7. https://www.html5plus.org/doc/zh_cn/oauth.html