記錄--uniapp登錄流程詳解uni.login-有解無憂

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

uni.login(OBJECT)登錄

H5平臺登陸注意事項：

微信內嵌瀏覽器運行H5版時，可通過js sdk實作微信登陸，需要引入一個單獨的js，詳見普通瀏覽器上實作微信登陸，并非開放API，需要向微信申請，僅個別開發者有此權限H5平臺的其他登陸，比如QQ登陸、微博登陸，uni-app未封裝，請在條件編譯里按普通H5寫法撰寫，

OBJECT 引數說明

引數名型別必填說明平臺差異說明provider String 否登錄服務提供商，通過 uni.getProvider 獲取，如果不設定則彈出登錄串列選擇界面
scopes String/Array 見平臺差異說明授權型別，默認 authbase，支持 authbase（靜默授權）/ authuser（主動授權） / authzhima（芝麻信用）支付寶小程式timeout Number 否超時時間，單位ms 微信小程式、百度小程式success Function 否介面呼叫成功的回呼
fail Function 否介面呼叫失敗的回呼函式
complete Function 否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

success 回傳引數說明

引數名說明authResult 登錄服務商提供的登錄資訊，服務商不同回傳的結果不完全相同errMsg 描述資訊

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
  }
});

uni.checkSession檢查登錄狀態是否過期

屬性型別必填說明success function 否介面呼叫成功的回呼函式fail function 否介面呼叫失敗的回呼函式complete function 否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

uni.getUserInfo(OBJECT)獲取用戶資訊，

UNI-APP 開發微信公眾號（H5）JSSDK 的使用方式

在 uniapp 中可以使用模塊方式參考微信 js-sdk ，微信官網直接下載的使用有問題，可以使用 jweixin-module，

安裝

下載使用方式下載地址：https://unpkg.com/[email protected]/out/index.js

使用

var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});

小程式:

1、使用 button 組件，并將 open-type 指定為 getUserInfo 型別，獲取用戶基本資訊，

詳情參考檔案:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用戶基本資訊，

詳情參考檔案:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

provider String 否登錄服務提供商，通過 uni.getProvider 獲取
withCredentials Boolean 否是否帶上登錄態資訊，微信小程式、頭條小程式lang Number 否指定回傳用戶資訊的語言，默認為 en，更多值請參考下面的說明，微信小程式timeout Number 否超時時間，單位 ms，微信小程式success Function 否介面呼叫成功的回呼
fail Function 否介面呼叫失敗的回呼函式
complete Function 否介面呼叫結束的回呼函式（呼叫成功、失敗都會執行）

userInfo 引數說明

引數型別說明平臺差異說明nickName String 用戶昵稱
openId String 該服務商唯一用戶標識 5+AppavatarUrl String 用戶頭像

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 獲取用戶資訊
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用戶昵稱為：' + infoRes.userInfo.nickName);
      }
    });
  }
});

說明：呼叫 wx.login() 獲取臨時登錄憑證code ，并回傳到開發者服務器，呼叫 auth.code2Session 介面，換取用戶唯一標識 OpenID 和會話密鑰 session_key，之后開發者服務器可以根據用戶標識來生成自定義登錄態，用于后續業務邏輯中前后端互動時識別用戶身份，

注意：

會話密鑰 session_key 是對用戶資料進行加密簽名的密鑰，為了應用自身的資料安全，開發者服務器不應該把會話密鑰下發到小程式，也不應該對外提供這個密鑰，臨時登錄憑證 code 只能使用一次

uni.getProvider(OBJECT)獲取服務供應商，僅App平臺支持，

在App平臺，可用的服務商，是打包環境中配置的服務商，與手機端安裝了什么app沒有關系，

云打包在manifest中配置相關模塊和SDK資訊，離線打包在原生工程中配置，某個服務商配置被打包進去，運行時就能得到相應的服務供應商，

uniapp 微信小程式授權后獲取用戶資訊：Padding is invalid and cannot be removed報錯決議

報錯原因：

是因為在呼叫uni.login時，可能會重繪登錄狀態，通過uni.login獲取到的code請求到的session_key，在請求獲取手機號時所需的引數值不一致所導致的報錯，

解決辦法：

在onLoad生命周期，先獲取code，再使用wx.getUserInfo配合后端介面獲取手機號即可，我這里只寫前端處理，后端api介面請根據官方檔案撰寫，

代碼片段:

<template>
<button open-type="getPhoneNumber" @getphonenumber="wxLogin" >使用微信登錄</button>
</template>
<script>
	import {GetUserSessionKeyAndOpenid,WXLogin} from '../api.js'
	export default{
		data(){
			return{
				wxUserCode:'',
			}
		},
		onLoad(){
				this.getWxUserCode();
			},
		methods:{
			getWxUserCode(){
				let that = this;
				//先登錄，獲取用戶code
				uni.login({
					provider: 'weixin',
					success: res => {
						that.wxUserCode = res.code;
					}
				})
			},
			//微信一鍵登錄
			wxLogin(e){
				const that = this;
				if(that.wxUserCode == ''){
					that.$refs.uToast.show({
						title:'微信登錄授權失敗',
						type: 'error'
					})
					that.getWxUserCode();
					return false;
				}
				beginLoading('登錄中...');
				const getSessionParam ={
					code:that.wxUserCode
				}
				//獲取用戶session_key和openid
				GetUserSessionKeyAndOpenid(that,getSessionParam).then(sessionKeyAndOpenidRes =>{
					wx.getSetting({
					  success: res => {
						if (res.authSetting['scope.userInfo']) {
						  // 已經授權，可以直接呼叫 getUserInfo 獲取頭像昵稱
						  wx.getUserInfo({
							success: res => {
							 if(e.detail.errMsg != 'getPhoneNumber:ok'){
								 endLoading();
								 that.$refs.uToast.show({
									title:'獲取個人資訊失敗',
									type: 'error'
								 })
								 that.getWxUserCode();
								 return false;
							 }
							 const param = {
								session_key:sessionKeyAndOpenidRes.Data.session_key,
								iv:e.detail.iv,
								encryptedData:e.detail.encryptedData
							 }
							 //呼叫后端api，獲取手機號
							 WXLogin(that,param).then(wxLoginRes =>{})
							}
						  })
						}
					  }
					})
				})
			},
		},
	}
</script>

本文轉載于:

https://blog.csdn.net/qq_40615333/article/details/120200204

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502335.html

標籤：其他

上一篇：大家都能看得懂的原始碼 - 如何封裝 cookie/localStorage/sessionStorage hook?

下一篇：02 要想專案跑，輪子不可少