uniapp+thinkphp5實現微信登錄

来源:https://www.cnblogs.com/nothavebug/p/18277732
-Advertisement-
Play Games

前言 之前做了微信登錄,所以總結一下微信授權登錄並獲取用戶信息這個功能的開發流程。 配置 1.首先得在微信公眾平臺申請一下微信小程式賬號並獲取到小程式的AppID和AppSecret https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2F ...


前言

之前做了微信登錄,所以總結一下微信授權登錄並獲取用戶信息這個功能的開發流程。

配置

1.首先得在微信公眾平臺申請一下微信小程式賬號並獲取到小程式的AppID和AppSecret
https://mp.weixin.qq.com/cgi-bin/loginpage?url=%2Fwxamp%2Fwacodepage%2Fgetcodepage%3Ftoken%3D418035161%26lang%3Dzh_CN

2.申請認證,企業認證300/年,個人好像是30/年,得認證,不然沒有微信登錄的許可權。

3.配置前端uniapp的項目,在主目錄下找到manifest.json文件->微信小程式配置->將你的小程式的AppID填寫上去

到此基本配置就已經完畢。

登錄流程

1.在實現登錄之前,首先得瞭解登錄的流程,這是微信登錄的時序圖

2.具體步驟為:
①小程式 wx.checkSession 校驗登陸態,success :介面調用成功,session_key未過期;fail :介面調用失敗,session_key已過期;

②因為微信公眾平臺發佈了《關於小程式收集用戶手機號行為的規範》中提到部分開發者在處理用戶手機號過程中,存在不規範收集行為,影響了用戶的正常使用體驗,所以平臺在向用戶申請獲取手機號時應明確向用戶說明收集的必要原因,並提供用戶隱私協議由用戶主動同意;所以登錄通過需通過@getphonenumber獲取用戶的encryptedData、iv,再通過wx.login獲取用戶的授權臨時票據code參數;

③.服務端接收到參數後隨即通過請求Appid + appSecret + code 到微信方伺服器 https://api.weixin.qq.com/sns/jscode2session 獲取 session_key & openid;

④.獲取到openid&&session_key後隨機根據getphonenumber獲取到的encryptedData、iv對用戶的手機號碼進行解密;

流程實現(後端)(PHP)

public function login()
    {
        $code = input('code');
        $encryptedData = input('mobileEncryptedData');
        $iv = input('mobileIv');
        if ($code) {
            $appID = 'wxa***************'; //微信公眾平臺->小程式AppID
            $appSecret = '****************';//微信公眾平臺->小程式AppSecret
            // 使用 code 換取 session_key 和 openid
            $url = "https://api.weixin.qq.com/sns/jscode2session?appid={$appID}&secret={$appSecret}&js_code={$code}&grant_type=authorization_code";
            $result = file_get_contents($url);
            $data = json_decode($result, true);
            // 獲取用戶openid&&session_key成功
            if(isset($data['openid'])){
                // 解密用戶手機信息
                $aesKey=base64_decode($data['session_key']);
                $aesIV=base64_decode($iv);
                $aesCipher=base64_decode($encryptedData);
                $result2=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
                // 用戶電話號碼 $userPhone['phoneNumber']
                $userPhone=json_decode( $result2, true);
                
                $phone=$userPhone['phoneNumber'];
                $business=$this->BusinessModel->where('mobile',$phone)->find();
                if($business){
                    // 已註冊
                }else{
                    // 未註冊
                }
            }else{
                $this->result([],'0','登錄失敗!','json');
            }
        } else {
            return "缺少 code 參數";
        }
    }

流程實現(前端)(Vue)(uniapp)

//html
<button class="wx_login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
	手機號快捷登錄
</button>

//js
getPhoneNumber(e) {
	wx.login({
	success: (res) => {
		this.userInfo.code = res.code
		this.userInfo.mobileEncryptedData = e.detail.encryptedData
		this.userInfo.mobileIv = e.detail.iv
		this.login()
	},
	fail() {
		this.m_Toast('獲取code失敗')
		}
	})
}
login() {
    this.$api.user.wx_login(this.userInfo).then(res => {
		if (res.code == 1) {
			uni.setStorageSync('userInfo', res.data);
				uni.showToast({
					title: res.msg,
					icon: 'success',
					duration: 1000
				})
				//其他處理

		} else {
			 uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 1500
			})
		}
	})
}

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

-Advertisement-
Play Games
更多相關文章
  • 大家好,我是曉凡。 寫在前面 在上一篇文章,我們詳細介紹了SpringBoot3 怎麼整合SpringDoc實現線上介面文檔。但是,有不少小伙伴 都覺得介面界面太醜了。有沒有什麼更美觀一點的UI界面呢? 當然是有的了,畢竟這是一個看臉的時代,Knife4j 這不來了麽。 一、界面比較 這兒我們將上一 ...
  • 本文以springboot+vue技術開發的低代碼平臺為案例,介紹應用系統如何集成企業微信,包括同步企業微信組織用戶、單點登錄、消息發送等。 ...
  • Tex類繼承自MathTex,具體功能和MathTex差不多,有一些細節的差別。在實際的使用中,我感覺Tex在結合一般文本和公式時更方便一些,所以我用的比較多的是Tex。Tex在manim各個模塊中的位置大致如上圖中所示。 1. Tex與MathTex區別 Tex的主要參數和方法和MathTex是一 ...
  • 應用場景:需要創建純色圖像,作為背景圖, 在此基礎上添加文字、形狀、新的圖片等等 原理: cv2的讀取圖片操作本質上是將圖片轉換為uint8的numpy.ndarray類型, 後續的其他圖像操作,本質上也是對於這個ndarray對象的操作 首先用numpy創建一個形狀為(224,224,3)、元素值 ...
  • Markdown 憑藉其簡潔易用的特性,成為創建和編輯純文本文檔的常用選擇。但某些時候我們需要更加精緻的展示效果,例如在專業分享文檔或列印成離線使用的紙質版時,就需要將Markdown文件以其他固定的文檔格式呈現。通過將 Markdown 轉換為 Word 和 PDF 格式,可以得到更多的格式設置, ...
  • 項目隨筆-【大事件(文章類)】 自定義參數校驗註解 需要寫一個自定義註解Xxx+校驗規則的類XxxValidation【需要繼承ConstraintValidator】 自定義註解 @Documented @Target(ElementType.FIELD) @Retention(Retention ...
  • Python 是一種面向對象、解釋型電腦程式設計語言,由 Guido van Rossum 於 1989 年底發明,第一個公開發行版發行於 1991 年。Python 語法簡潔而清晰,具有豐富和強大的類庫。它常被昵稱為膠水語言,能夠把用其他語言製作的各種模塊(尤其是 C/C++)很輕鬆地聯結在一起 ...
  • 正文 昨天睡了一天覺,今天看了一天《三體》電視劇。真是墮落到沒邊了呢(笑。本來想寫代碼完成年度計劃,或者多寫幾篇文章,但實在不想寫,也不想動筆。 感覺這個周末什麼都沒做呢,休息倒是休息好了。 今天 30 號,也不知道靈平安到學校沒有。 本有一些想寫的東西,但懶得動筆了。 成功日記: 《西游記》看到了 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...