用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

ThinkPHP6.0 + UniApp 實現小程序的 微信登錄

Rolan 2020-6-10 00:21

微信登錄思路:在main.js 中封裝公共函數,用于判斷用戶是否登錄在main.js 中分定義全局變量,用于存儲接口地址如果沒有登錄、則跳轉至登錄頁面進入登錄頁面通過 wx.login 獲取用戶的 code通過 code 獲取用戶的 Sess ...

  1. 微信登錄思路:

    1. 在main.js 中封裝公共函數,用于判斷用戶是否登錄
    2. 在main.js 中分定義全局變量,用于存儲接口地址
    3. 如果沒有登錄、則跳轉至登錄頁面
    4. 進入登錄頁面
    5. 通過 wx.login 獲取用戶的 code
    6. 通過 code 獲取用戶的 SessionKey、OpenId 等信息【本應后臺接口、但是此處使用js發送請求】
    7. 通過 openId 調用后臺 Api 獲取用戶的信息
    8. 獲取成功,則說明已經授權過了,直接登錄成功
    9. 獲取失敗,則說明沒有授權過,需要授權之后才能進行登錄
    10. 用戶點擊頁面微信登錄按鈕【 <button open-type="getUserInfo"></button>】
    11. 獲取用戶數據,然后調用后臺接口寫入數據庫
  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
    								},
    								method: 'POST',
    								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>
    
  4. 在 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, UserInfo $userInfo)
    {
        // 獲取數據
        $data['u_openid'] = $request->param('openid', '');
        $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, 'msg' => $validate->getError(), '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]);
    }
    
  7. 完工?。?!

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 大大大溫 來自: cnblogs
梦幻单人赚钱方法 安徽快三中奖规则表 山西11选五中奖金额 体彩视频开奖直播 浙江十一选五走势图开奖结果 河南体彩11选5开奖走势 广西11选5开奖手机直播 云南十一选五开奖一定牛结果 甘肃11选5复式 江苏11选5今天开 青海十一选五今天预测