ThinkpHP 6.0 + UniApp 애플 리 케 이 션 구현 애플 리 케 이 션 의 위 챗 로그 인

10011 단어
  • 위 챗 로그 인 사고:
  • main. js 에 공공 함 수 를 밀봉 하여 사용자 의 로그 인 여 부 를 판단 하 는 데 사용 합 니 다
  • main. js 에서 전역 변 수 를 정의 하여 인터페이스 주소
  • 를 저장 합 니 다.
  • 로그 인 하지 않 으 면 로그 인 페이지 로 이동
  • 로그 인 페이지 진입
  • wx. login 을 통 해 사용자 의 코드 를 가 져 옵 니 다
  • code 를 통 해 사용자 의 Sessionkey, OpenId 등 정 보 를 얻 을 수 있 습 니 다. [배경 인터페이스 여야 하 는데 js 로 요청 을 보 냅 니 다]
  • openId 를 통 해 백 엔 드 Api 를 호출 하여 사용자 의 정 보 를 얻 기
  • 획득 에 성공 하면 권한 이 부여 되 었 고 직접 로그 인 에 성공 했다 는 것 을 의미한다
  • 획득 에 실 패 했 으 면 권한 이 부여 되 지 않 았 고 권한 이 부여 되 어야 로그 인 할 수 있 음
  • 사용 자 는 페이지 위 챗 로그 인 버튼 을 클릭 합 니 다 【 】
  • 사용자 데 이 터 를 가 져 온 다음 배경 인터페이스 로 데이터베이스 에 쓰기
  • 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/'
    
  • pages / login / login. vue 에 다음 과 같이 추가
    
    
    
    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();
    	}
    };
    
    
    
    
  • pages / my / my. vue 에 다음 과 같이 추가 합 니 다.
    
    
    
    var loginRes;
    export default {
    	data() {
    		return {};
    	},
    	onLoad() {
    		//         
    		loginRes = this.checkLogin('../my/my', 2);
    		//       ,   
    		if (!loginRes) {
    			return;
    		}
    	},
    	methods: {}
    };
    
    
    
  • 좋은 웹페이지 즐겨찾기