記錄--uniapp上如何實現安卓app微信登錄功能(操作流程總結)

来源:https://www.cnblogs.com/smileZAZ/archive/2022/09/16/16699780.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 uniapp上如何實現安卓app微信登錄功能?下麵本篇文章給大家分享一下uniapp上實現安卓app微信登錄的許可權申請、開發的具體操作流程,希望對大家有所幫助! 微信開放平臺提供了微信的一些開放介面,比如微信登錄、分享支付等,為其他各平臺 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

uniapp上如何實現安卓app微信登錄功能?下麵本篇文章給大家分享一下uniapp上實現安卓app微信登錄的許可權申請、開發的具體操作流程,希望對大家有所幫助!

微信開放平臺提供了微信的一些開放介面,比如微信登錄、分享支付等,為其他各平臺應用提供支持服務。網上資料比較鬆散,加上一些陌生概念,使得簡單流程並沒有串連起來,本文總結了uniapp上實現安卓app微信登錄的許可權申請、開發的具體操作流程,希望對你有用。

首先來看下開發微信登錄功能的整體流程,我梳理了一個總流程圖,幫助你在理解後面的內容時更有條理:

可以看出來,開發一個微信登錄還是有點麻煩的呀,下麵來讓我一步步地詳細介紹吧!

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

首先註冊一個微信開放平臺賬號,微信的平臺一共有4個,這個開放平臺就是開放微信的登錄分享支付等內容給app、網頁、小程式等使用。具體過程就不細說了,郵箱賬號要註意不要與微信其他地方用到的相衝突就行了。

2、開發者資質認證

賬號註冊成功後登錄,要開發微信登錄這些功能還要進行開發者資質認證。現在開放平臺的註冊對個人是開放的,但是開發者資質認證只對企事業單位開放,而且認證要交300塊錢。我用的企業認證,申請過程中要用到企業相關資質證書,資料齊全流程挺快的,兩三天左右可以搞定吧,發票申請挺慢的,要一個月左右。

3、在開放平臺申請移動應用

認證成功後,進入管理中心,選擇移動應用,創建移動應用,按步驟來就行了,可能唯一會讓你卡住的就是應用簽名了。我走到這一步時完全是懵逼狀態,不知道啥是應用簽名。

4、應用簽名生成

看上面的說明,應用簽名主要是用來進行身份驗證,之所以說是二次校驗,是相對於登錄用戶來說的。一般情況下,你登錄了開放平臺就可以申請了,現在多了這個簽名,你得再折騰一下,證明自己擁有這個應用的開發許可權。一般情況下,安卓的app發佈在小廠大都是用的公共測試證書,現在要生成應用簽名就得用自有證書了。有了自有證書,就可以生成微信開放平臺要的這個應用簽名了。那這個自有證書怎麼來呢?接下來,看看怎麼折騰出來這個自有證書和應用簽名吧。

生成自有證書

1)、安裝jre環境

jre是java開發環境,可以用cmd命令視窗用java命令判斷下當前環境是否有jre,如果提示 'java' 不是內部或外部命令,也不是可運行的程式或批處理文件,那說明沒有安裝;如果像這樣輸出內容就是已經安裝過了:

 如果沒有安裝就要下載jre安裝包:www.oracle.com/java/techno…

 安裝好之後,重新打開cmd,再次輸入java就可以看到正常輸出相關內容了。接下來,還要把jre安裝路徑添加到系統環境變數中:

d:  

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

用cmd輸入以上命令,第一行意思是切換到d盤,這個目錄隨意,是用來存放接下來會生成的簽名證書的,你可以再建一個文件夾然後cd進去。回車後,在第二行意思是將jre命令添加到臨時環境變數中,後面的地址根據你的jre實際安裝地址來。這步之後,後面的操作生成的文件就會生成在當前文件夾中。

2)、生成簽名證書

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

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

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

確認後,又提示密鑰口令,這個直接回車相同就行。

 如果提示這個,就把這個指令複製了粘貼執行,輸入前面設置的口令123456就可以了。

 最後在當前執行命令的文件夾里就能看到應用證書了。

生成簽名

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

3)、使用自有證書打包

這一步很簡單,用hbuilderx進行app雲打包,在彈出框中選擇安卓的自有證書打包方式。這個自有證書就是我們剛纔生成的證書,興不興奮,我們也是有證書的人了!?下麵三欄,別名、密碼都是前面的操作步驟中寫過的,沒忘記就寫上吧,然後選擇證書文件,剩下的都是常規操作,最後打包就可以了。

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

先到微信開放平臺下載簽名生成工具,下載好之後,在手機端安裝,輸入安卓包名。

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

輸入正確的包名(去掉了'UNI'開頭),點擊下麵的按鈕就生成了一串id,這個就是——應用簽名!真是費勁!

5、按開放平臺流程申請應用

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

 最後就是下麵這樣子了,代表你提交成功,可以耐心的等了(三天了,沒變化,最後過了七八天才通過,中間按要求修改了兩次):

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

最後要說的一點就是,app或者你資料中提交的相關功能變數名稱網站不要給登錄界面,否則可能會審核不通過,因為他們進不去,看不了當然無法審核。

6、獲取appid和appsecret

移動應用的審核通過後,微信登錄功能就會自動開放了,同時開放的還有分享、發送朋友等功能。

同時,你也可以獲取到獲取appid和appsecret,這個我自己保存越來,後面開發會用到的。

7、微信登錄業務流程梳理

uniapp提供了微信登錄api,不過我們首先要清楚微信登錄的流程,因為微信登錄要配合我們系統自身的業務。我在這裡梳理了一張流程圖,這張圖就是上面總流程圖的一部分,你可以對照參考,輔助你開發相關功能。

8、微信登錄服務api調用

如果你按照前面的步驟拿到AppId和AppSecret信息,接下來就是按照這個流程來開發微信登錄功能。在uniapp上開發app版本的微信登錄功能需要調用uni的api還有h5+的api。 這裡就直接給一個示例代碼:

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: 'https://*********/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 {

                                    //首次登錄,跳轉到一個綁定賬號的頁面

                                    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、首先取到微信服務對象this.weixinAuthService。

2、其次調用授權api——authorize,然後再調用uni.login這個api。

3、uni.login成功後,如果想取得用戶信息可以調用uni.getUserInfo,也可以調用plus.oauth.getServices,後者是h5+的api,前者也是基於後者的封裝。

4、代碼中這個介面(/wx-login/appwxlogin)是一個本地服務,具體的業務就是把openid帶到用戶表中去查找,如果能找到,說明此用戶綁定過微信,後端返回用戶信息直接登錄;如果沒找到,就返回提示需要輸入用戶名密碼登錄,而且這個登錄過程要帶上openid,最終插入資料庫。

本文轉載於:

https://m.php.cn/uni-app/481387.html

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 移動端中的元素內容超出時,對容器設置overflow-x: auto就可以通過手勢水平移動。但是 PC 端只能通過滑鼠滾輪上下滑動,而不能水平移動。 只需要給元素添加一個監聽滑鼠滾輪事件,上下滑動時修改其 scrollLeft 屬性值就可以實現。直接貼上代碼: <div class="horizon ...
  • 好家伙, 我的飛機大戰部署上線了 胖虎的飛機大戰 感興趣的可以去玩一下 (怕有人接受不了這個背景,我還貼心的準備切換背景按鈕,然而這並沒有什麼用) 現在,我們停下腳步,重新審視這個游戲 現在基本的框架都弄出來了,敵機,英雄,子彈,分數,生命 但是,這個“游戲“有個非常致命的問題, 他不好玩,(不好玩 ...
  • 本文分別使用 SFC(模板方式)和 tsx 方式對 Element Plus *el-menu* 組件進行二次封裝,實現配置化的菜單,有了配置化的菜單,後續便可以根據路由動態渲染菜單。 ...
  • vue3中,新增了 defineComponent ,它並沒有實現任何的邏輯,只是把接收的 Object 直接返回,它的存在是完全讓傳入的整個對象獲得對應的類型,它的存在就是完全為了服務 TypeScript 而存在的。 我都知道普通的組件就是一個普通的對象,既然是一個普通的對象,那自然就不會獲得自 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、前言 入職的第一個需求是跟著一位前端大佬一起完成的一個活動項目。 由於是一起開發,當然不會放過閱讀大佬的代碼的機會。 因為我的頁面中需要使用到倒計時功能,發現大佬的已經寫了個現成的倒計時組件,於是直接就拿過來用了。 傳個參數就實現了功 ...
  • 本人的工作項目中,需求是: 點擊“列印”按鈕,打開pdf預覽彈出框,彈出框有:頭部選擇列印模板、列印方式、印表機,都是下拉選擇框;中部是pdf預覽塊;底部是確定列印。 準備工作: 預覽pdf,後端介面返回了pdf預覽地址,可線上直接打開。vue-pdf插件可以滿足需求。 選擇方式如果選擇本地列印,下 ...
  • 1.如果只比較兩個值的話 效果是這種的 // 這是<template>的 <el-row> <el-col :span="12"> <el-form-item label="計劃評審日期(起)" prop="planPsDateStart"> <el-date-picker v-model="vm. ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? // 以下代碼執行後,瀏覽器的控制臺中輸出的內容是什麼 var arr = [0, 1, 2]; arr[10] = 10; var newArr = arr.filter((x) => x undefined); console.log(new ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...