記錄--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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...