2. 程式人生 > 程式設計 >使用 UniApp 實現小程式的微信登入功能

使用 UniApp 實現小程式的微信登入功能

阿新 • • 發佈：2020-06-11

1.微信登入思路：

  • 在main.js 中封裝公共函式，用於判斷使用者是否登入
  • 在main.js 中分定義全域性變數，用於儲存介面地址
  • 如果沒有登入、則跳轉至登入頁面
  • 進入登入頁面
  • 通過 wx.login 獲取使用者的 code
  • 通過 code 獲取使用者的 SessionKey、OpenId 等資訊【本應後臺介面、但是此處使用js傳送請求】
  • 通過 openId 呼叫後臺 Api 獲取使用者的資訊
  • 獲取成功，則說明已經授權過了,直接登入成功
  • 獲取失敗，則說明沒有授權過，需要授權之後才能進行登入
  • 使用者點選頁面微信登入按鈕【 <button open-type="getUserInfo"></button>】
  • 獲取使用者資料，然後呼叫後臺介面寫入資料庫

2.在 applets/main.js 中新增如下

// 封裝全域性登入函式
// backpage,backtype 2個引數分別代表：
// backpage : 登入後返回的頁面
// backtype : 開啟頁面的型別[1 : redirectTo 2 : switchTab]
Vue.prototype.checkLogin = function( backpage,backtype ){
	// 同步獲取本地資料（uid、隨機碼、使用者名稱、頭像）
	var user_id = uni.getStorageSync('user_id');
	var user_nu = uni.getStorageSync('user_nu');
	var user_nm = uni.getStorageSync('user_nm');
	var user_fa = uni.getStorageSync('user_fa');
	if( user_id == '' || user_nu == '' || user_fa == ''){
		// 使用重定向的方式跳轉至登入頁面
		uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
		return false;
	}
	// 登入成功、已經登入返回陣列 [使用者 id,使用者隨機碼,使用者暱稱,使用者表情]
	return [user_id,user_nu,user_nm,user_fa];
}
// 定義一個全域性的請求地址
Vue.prototype.apiServer = 'http://0608.cc/'

3.在 pages/login/login.vue 中新增如下

<template>
	<view>
		<!-- login view html start -->
		<view>
			<view>
				<view class="header"><image src="/static/img/public/login-wx.png"></image></view>
				<view class="content">
					<view>申請獲取以下許可權</view>
					<text>獲得你的公開資訊(暱稱，頭像、地區等)</text>
				</view>
				<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授權登入</button>
			</view>
		</view>
		<!-- login view html end -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			appid: '*************',secret: '*************************',code: '',sessionKey: '',openId: '',userInfo: {
				avatarUrl: '',city: '',country: '',gender: 1,language: '',nickName: ''
			},pageOption: {}
		};
	},methods: {
		// 第一授權獲取使用者資訊 ===》按鈕觸發
		wxGetUserInfo() {
			let _self = this;
			// 1.獲取使用者的資訊
			uni.getUserInfo({
				provider: 'weixin',success: ( infoRes ) => {
					console.log( infoRes )
					_self.userInfo = infoRes.userInfo
					// 2.提交資料到後臺、寫入資料庫
					uni.request({
						url: _self.apiServer + 'appletsUserInfo',data: {
							openid: _self.openId,avatarUrl: _self.userInfo.avatarUrl,city: _self.userInfo.city,country: _self.userInfo.country,gender: _self.userInfo.gender,language: _self.userInfo.language,nickName: _self.userInfo.nickName
						},method: 'POST',success: res => {
							if( res.data.code != 0 )
							{
								uni.showToast({ title: res.data.msg,icon: 'none' });
								return false;
							}
							// 使用者資訊寫入快取
							uni.showToast({title: '登入成功'})
							uni.setStorageSync( 'user_id',res.data.res.u_id );
							uni.setStorageSync( 'user_nm',res.data.res.u_nickName );
							uni.setStorageSync( 'user_fa',res.data.res.u_avatarUrl );
							uni.setStorageSync( 'user_nu',res.data.res.u_regtime );
							// 然後跳回原頁面
							if( _self.pageOption.backtype == 1 )
							{
								uni.redirectTo({ url: _self.pageOption.backpage })
							}else{
								uni.switchTab({ url: _self.pageOption.backpage })
							}
						},fail: () => {
							uni.showToast({ title: '使用者資訊操作失敗',icon: 'none' });
						}
					});
				},fail: () => {
					uni.showToast({ title: '獲取使用者資訊失敗',icon: 'none' });
				}
			});
			return false
		},// 登入
		login() {
			let _self = this;

			// 0. 顯示載入的效果
			uni.showLoading({
				title: '登入中...'
			});

			// 1. wx 獲取登入使用者 code
			uni.login({
				provider: 'weixin',success: loginRes => {
					console.log(loginRes);
					_self.code = loginRes.code;
					// 2. 將使用者登入code傳遞到後臺置換使用者SessionKey、OpenId等資訊
					uni.request({
						url:
							'https://api.weixin.qq.com/sns/jscode2session?appid=' +
							_self.appid +
							'&secret=' +
							_self.secret +
							'&js_code=' +
							_self.code +
							'&grant_type=authorization_code',success: codeRes => {
							console.log(codeRes);
							_self.openId = codeRes.data.openid;
							_self.sessionKey = codeRes.data.session_key;
							// 3.通過 openId 判斷使用者是否授權
							uni.request({
								url: _self.apiServer + 'loginApplets',data: {
									openid: _self.openId
								},success: openIdRes => {
									console.log(openIdRes);
									// 隱藏loading
									uni.hideLoading();
									// 還沒授權登入、請先授權然後登入
									if (openIdRes.data.code == 1) {
										// 提示訊息、讓使用者授權
										uni.showToast({ title: openIdRes.data.msg,icon: 'none' });
									}
									// 已經授權了、查詢到使用者的資料了
									if (openIdRes.data.code == 0) {
										// 使用者資訊寫入快取
										uni.showToast({title: '登入成功'})
										uni.setStorageSync( 'user_id',openIdRes.data.res.u_id );
										uni.setStorageSync( 'user_nm',openIdRes.data.res.u_nickName );
										uni.setStorageSync( 'user_fa',openIdRes.data.res.u_avatarUrl );
										uni.setStorageSync( 'user_nu',openIdRes.data.res.u_regtime );
										// 然後跳回原頁面
										if( _self.pageOption.backtype == 1 )
										{
											uni.redirectTo({ url: _self.pageOption.backpage })
										}else{
											uni.switchTab({ url: _self.pageOption.backpage })
										}
									}
								},fail: () => {
									uni.showToast({ title: '獲取授權資訊失敗',icon: 'none' });
									return false;
								}
							});
						},fail: () => {
							uni.showToast({ title: '獲取 SesssionKey OpenId 失敗',icon: 'none' });
							return false;
						}
					});
				},fail: () => {
					uni.showToast({ title: '獲取 code 失敗',icon: 'none' });
					return false;
				}
			});
			return false;
		}
	},onLoad( options ) {
		// 接收跳轉的引數
		this.pageOption = options
		//預設載入
		this.login();
	}
};
</script>

<style>
.header {
	margin: 90rpx 0 90rpx 50rpx;
	border-bottom: 1px solid #ccc;
	text-align: center;
	width: 650rpx;
	height: 300rpx;
	line-height: 450rpx;
}

.header image {
	width: 200rpx;
	height: 200rpx;
}

.content {
	margin-left: 50rpx;
	margin-bottom: 90rpx;
}

.content text {
	display: block;
	color: #9d9d9d;
	margin-top: 40rpx;
}

.bottom {
	border-radius: 80rpx;
	margin: 70rpx 50rpx;
	font-size: 35rpx;
}
</style>

在 pages/my/my.vue 中新增如下：

<template>
	<view>我的頁面</view>
</template>

<script>
var loginRes;
export default {
	data() {
		return {};
	},onLoad() {
		// 載入定義好的方法
		loginRes = this.checkLogin('../my/my',2);
		// 沒有登入成功，返回空
		if (!loginRes) {
			return;
		}
	},methods: {}
};
</script>

<style></style>

5.PHP 介面 loginApplets

public function loginApplets(Request $request,UserInfo $userInfo)
{
 // 獲取資料
 $data['u_openid'] = $request->param('openid','');
 // 驗證資料
 $rule = [
  'u_openid' => 'require|max:200|min:10'
 ];
 $message = [
  'u_openid.require' => 'openid 不能為空','u_openid.max'  => 'openid 格式錯誤','u_openid.min'  => 'openid 格式錯誤'
 ];
 $validate = Validate::rule($rule)->message($message);
 if (!$validate->check($data)) {
  return json(['code' => 1,'msg' => $validate->getError(),'res' => null]);
 }
 // 根據 openid 判斷是否存在
 $where['u_openid'] = $data['u_openid'];
 $user = $userInfo->selOne($where);
 if (!$user) {
  return json(['code' => 1,'msg' => '還沒授權登入、請先授權然後登入','res' => $user]);
 }
 return json(['code' => 0,'msg' => '已授權獲取到使用者的資料','res' => $user]);
}

6.PHP 介面 appletsUserInfo

public function appletsUserInfo(Request $request,'');
 $data['u_avatarUrl'] = $request->param('avatarUrl','');
 $data['u_city'] = $request->param('city','');
 $data['u_country'] = $request->param('country','');
 $data['u_gender'] = $request->param('gender','');
 $data['u_language'] = $request->param('language','');
 $data['u_nickName'] = $request->param('nickName','');
 // 驗證資料
 $rule = [
  'u_openid' => 'require|max:200|min:10','u_avatarUrl' => 'require','u_nickName' => 'require'
 ];
 $message = [
  'u_openid.require'  => 'openid 不能為空','u_openid.max'   => 'openid 格式錯誤','u_openid.min'   => 'openid 格式錯誤','u_avatarUrl.require' => '使用者頭像 不能為空','u_nickName.max'  => '使用者名稱 格式錯誤',];
 $validate = Validate::rule($rule)->message($message);
 if (!$validate->check($data)) {
  return json(['code' => 1,'res' => null]);
 }

 // 根據 openid 判斷是否存在
 $where['u_openid'] = $data['u_openid'];
 $user = $userInfo->selOne($where);

 // 存在、執行修改
 if ($user) {
  $user_res = $userInfo->updOne($where,$data);
  $res = [];
  $res['u_id'] = $user['u_id'];
  $res['u_regtime'] = $user['u_regtime'];
 }

 // 不存在、執行新增
 if (empty($user)) {
  $res = [];
  $res = $data;
  $res['u_regtime'] = time();
  $res['u_id'] = $userInfo->addOne($res);
 }

 // 判斷是否新增成功
 if (empty($res['u_id'])) {
  return json(['code' => 1,'msg' => '註冊失敗,返回重試','res' => null]);
 }
 return json(['code' => 0,'msg' => 'ok','res' => $res]);
}

總結

到此這篇關於使用 UniApp 實現小程式的微信登入的文章就介紹到這了,更多相關使用 UniApp 實現小程式的微信登入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

Django後端傳送小程式微信模板訊息示例(服務通知)

模板訊息 官方文件：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/template-message/templateMessage.send.html

TP5呼叫小程式微信支付

1，必須要有 $mch_id $key $appid這三個值，是需要去申請的，我是直接用公司的2，購買商品訂單號使用者openid統一下單名稱商品價格（必須以分為單位，調起微信支付）伺服器的ip地址（沒有的話，就獲取自己本地）3，建

小程式微信支付申請與配置完整版操作流程

小程式微信支付申請與配置完整版操作流程一、 申請小程式微信支付 微信支付申請分為兩種情況：

WxJava-第三方平臺轉發小程式微信客服訊息

第三方平臺轉發小程式微信客服訊息 @Service @EnableConfigurationProperties({WechatOpenProperties.class})

c# 小程式微信支付

微信支付步驟： 1.小程式後臺下單 生成訂單號 //獲取商品價格 decimal shop_money = Convert.ToDecimal(shop_info.Rows[0][\"money\"]);

小程式微信支付

實現前佈置 1：下載官方微信支付SDK（‘https://pay.weixin.qq.com/wiki/doc/api/index.html’）

使用 UniApp 實現小程式的微信登入功能

1.微信登入思路： 在main.js 中封裝公共函式，用於判斷使用者是否登入 在main.js 中分定義全域性變數，用於儲存介面地址

使用uniApp實現小程式端程式更新提醒功能

技術標籤：前端開發androiduni-app小程式前端 當用戶在開啟小程式的時候如果小程式有新的版本進行釋出，會提示使用者是否更新功能！

小程式手機號登入(功能基本實現，但有欠缺，可在基礎上進行優化)

login.wxml <view class=\"container\"> <view class=\"page-body\"> <form catchsubmit=\"formSubmit\">

使用wxpy實現自動傳送微信訊息功能

思路整理：1、進入心靈雞湯網頁，使用python獲取心靈雞湯內容 　　　　　2、登陸微信，找到需要傳送的朋友

Spring security實現記住我下次自動登入功能過程詳解

一、原理分析 第一次登陸時，如果使用者勾選了readme選項,登陸成功後springsecurity會生成一個cookie返回給瀏覽器端，瀏覽器下次訪問時如果攜帶了這個cookie,springsecurity就會放行這次訪問。

使用Taro實現小程式商城的購物車功能模組的例項程式碼

Taro是一套遵循React語法規範的多端開發解決方案。 現如今市面上端的形態多種多樣，Web、React-Native、微信小程式等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套程式碼的

js實現ajax的使用者簡單登入功能

本文例項為大家分享了js實現ajax的使用者簡單登入的具體程式碼，供大家參考，具體內容如下

IDEA實現 springmvc的簡單註冊登入功能的示例程式碼

1.基本環境搭建 spring簡介 SpringMVC框架是以請求為驅動，圍繞Servlet設計，將請求發給控制器，然後通過模型物件，分派器來展示請求結果檢視。其中核心類是DispatcherServlet，它是一個Servlet，頂層是實現的Servle

記錄一下uniapp 商城專案完成微信分享功能的過程

專案需求： 使用者分享商品至微信或朋友圈， 點選了分享的其他使用者如果安裝了客戶端就喚起APP開啟商品詳情，沒有安裝APP的使用者則使用分享人的邀請碼進行註冊。

PHP+MYSQL實現簡單的使用者註冊登入功能

技術標籤：碼農之路 有必要用一下php+mysql實現一下這個“最基礎”的使用者功能，（雖然開發可能會用後端雲）

uniapp實現釘釘掃碼登入示例程式碼

由於uniapp暫無釘釘授權登入所以本文將釘釘掃碼登入作為嵌入uniapp，最終實現釘釘掃碼登入app

nginx反向代理https網站 並實現網站的註冊和登入功能

最近給我們官網做了新加坡、中國香港、美國、加拿大地區的反代，由於現階段發展有限，只好選擇這種最節約的方法了，但並非負載均衡，負載均衡等後期商城確定了要做。

微信小程式實現登入功能 （第一種模式）

------------恢復內容開始------------ 第一種模式：設定小程式啟動頁為登入頁 1.wxml程式碼（佈局的，最終要的是按鈕）

基於雲開發的答題活動小程式v2.0-實現微信授權登入功能

專案技術棧 微信原生小程式+雲開發。為什麼選擇微信原生小程式進行開發呢？因為能夠直接應用它的雲開發能力吖。