유니앱 미니프로그램 위챗 로그인 기능 구현 방법 (프로세스 요약)

유니앱 미니프로그램 위챗 로그인 기능은 어떻게 구현하나요? 다음 글에서는 uniapp 미니 프로그램의 WeChat 로그인 기능의 구체적인 작동 과정을 공유하겠습니다. 도움이 되셨으면 좋겠습니다!

uniapp 개발 WeChat 로그인 기능을 소개하기 전에 글을 썼습니다. 오늘은 미니 프로그램에서 WeChat 로그인을 구현하는 방법을 소개하겠습니다. 인터페이스의 경우, 이 기사에서는 구체적인 인터페이스 디자인과 테이블 구조 디자인 아이디어를 언급할 것입니다. 앱에 비해 위챗 애플릿에서 위챗 로그인을 구현하는 것이 더 편리하다. 단, 전제조건은 위챗 오픈 플랫폼이 있다는 점이다. 그렇지 않다면 계정을 등록해야 한다. 공식 홈페이지에서.

다음으로, 단계에 대해 이야기해보겠습니다. 한 가지 주의할 점은 각 미니 프로그램은 이메일 주소로 등록되며, 이메일 주소는 하나의 미니 프로그램에만 바인딩될 수 있다는 것입니다. 개인이 소유한 미니 프로그램의 수는 직접적으로 제한됩니다.

1. 오픈 플랫폼에 등록

이 단계는 이전 앱의 앱 WeChat 로그인 기능과 동일합니다. 등록 과정을 사용해야 합니다. 여기서는 회사 정보만 언급하겠습니다. 앱, 미니 프로그램, 공개 계정, 웹사이트 등에서 사용할 수 있는 개방형 플랫폼을 등록하는 것만으로도 충분합니다. 기사가 작으므로 완전해야 합니다.

2. 개발자 자격 인증

오픈 플랫폼에서 개발자 자격 인증을 통과하면 앱, 미니 프로그램, 공식 계정, 웹사이트 등 다양한 플랫폼이 오픈되기 때문에 이전과 동일합니다. WeChat에는 공개 기능 권한이 있으며 각 기능에 여러 기능을 추가할 수 있습니다. 예를 들어 50개의 미니 프로그램을 추가할 수 있습니다. 이렇게 계산하면 300위안은 여전히 ​​어느 정도 가치가 있는 금액이다.

3. 오픈 플랫폼에 미니 프로그램 추가

여기에 미니 프로그램 관련 정보를 입력하면 됩니다. 다음 단계는 WeChat에서 QR 코드를 스캔하는 것입니다. 이 스캔은 이메일이 WeChat과 관련되어 있음을 의미합니다. 코드를 스캔한 후 미니 프로그램이 공개 플랫폼에 성공적으로 바인딩되었습니다.

클릭해서 보시고 살펴보니 내용이 거의 없는 것을 발견했습니다.

이것은 앱을 개방형 플랫폼에 바인딩하는 것과는 완전히 다릅니다. 사실 이것은 WeChat 애플릿이기 때문에 WeChat의 기본 권한을 기반으로 WeChat에 탑재됩니다. , 그러니까 위챗 미니 프로그램이라고 하면 위챗의 거의 모든 기능을 직접 사용할 수 있다는 뜻입니다. 개발만 가능하다면 코드만 보여주시면 됩니다.

4. AppSecret 받기

애플릿 키는 일단 얻으면 일반 텍스트로 저장되지 않습니다. 나중에 세대를 재설정할 수 있습니다. 해당 키는 일반 미니프로그램 사업에서는 사용되지 않으며, 위챗 오픈 기능(로그인, 공유 등)을 할 때만 사용됩니다.

5. WeChat 로그인 비즈니스 디자인

WeChat 로그인 비즈니스는 일반 인터넷 제품에 대한 등록 및 로그인 기능을 가지고 있습니다. 그러나 인터넷이 아닌 제품에서는 일반 WeChat 사용자가 이 애플리케이션에 등록하는 것이 일반적으로 허용되지 않습니다. 따라서 이 로그인을 위해서는 일반 사용자와 WeChat 계정을 연결해야 합니다.

비즈니스 프로세스는 WeChat 로그인 기능에서 여전히 비즈니스입니다.

그럼 질문은 로그인을 달성하는 방법입니다. 이 글의 초점은 사진의 로그인을 명확하게 설명하는 것입니다. 위의 특정 콘텐츠 .

여기 WeChat의 공식 로그인 비즈니스 디자인 다이어그램이 있습니다. 물론, 이 다이어그램은 이제 막 시작하는 사람들에게는 다소 복잡하지만 아래 분석에 따르면 대략적으로 이해하실 수 있습니다.

다음은 프로젝트의 실제 상황을 바탕으로 한 구체적인 비즈니스 분석입니다. 구체적인 내용은 앞부분과 뒷부분 두 부분으로 나뉩니다.

프런트 엔드 비즈니스

예를 들어 Xiao Ming이 휴대폰에서 WeChat을 사용하여 로그인하는 경우 처음 로그인하는 경우 관리자 계정과 같은 시스템 계정과 연결해야 합니다. 1. WeChat WeChat 계정 정보를 승인하고 획득합니다. 2. WeChat 계정을 시스템 계정에 바인딩합니다.

첫 번째 단계는 WeChat 계정 정보를 먼저 획득하는 것입니다. 그런 다음 개발자 AppID 및 AppSecret을 사용하여 특정 로그인 인터페이스를 호출하여 사용자 정보 및 openid 등의 정보를 얻습니다.

두 번째 단계에서는 이 정보를 얻은 후 프런트 엔드 인터페이스로 돌아가 로그인 인터페이스를 제공해야 합니다. 이 단계는 시스템 사용자 이름과 비밀번호를 입력하는 데 사용됩니다.

백엔드 비즈니스

두 번째 단계는 신규 사용자가 이 앱에 접속할 때 반드시 거쳐야 하는 단계입니다. 이 단계 이후에는 시스템 사용자 계정 정보와 현재 사용자의 WeChat 정보(openid)가 전송될 수 있습니다. 백그라운드에서 일반 로그인 확인 외에도 로그인 인터페이스도 이 openid와 일치해야 합니다. 모든 것이 올바른 경우에만 로그인이 성공할 수 있습니다. 시스템 계정과 openid는 일대다 관계로 이해하기 쉽습니다. 여러 WeChat 사용자가 로그인할 수 있는 관리자 계정입니다. 물론, 현재 위챗 사용자가 처음 로그인하는 경우, 로그인 시 현재 위챗 사용자와 시스템 계정 간의 바인딩 정보 일부를 삽입해야 합니다.

프론트엔드 업무의 경우 실제로 위챗 로그인 부분을 캡슐화하여 서비스 후처리라고 부를 수 있습니다. AppID와 AppSecret 정보는 상대적으로 민감하기 때문에 백엔드에 저장하는 것이 가장 좋습니다.

로그인 사업 구현

1. 로그인 인증 및 임시 로그인 자격증명 코드 획득

코드는 아래에 게시되어 있으니 아이디어를 자세히 분석해 보겠습니다. WeChat에 로그인하려면 인증 페이지가 나타납니다. 보기 레이어 코드에는 ""를 작성해야 합니다. 버튼 이벤트 메소드가 트리거된 후 인증 후에 호출됩니다. uni.login API의 경우 이 단계는 코드를 얻는 것입니다. 이는 임시적이며 호출될 때마다 달라집니다. 프런트엔드는 이 인증서를 받고 백엔드로 이동하여 서버 인터페이스 'wxlogin'

<button id="btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"></button>

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: &#39;weixin&#39;,
					success: function(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								method: &#39;POST&#39;,
								url: &#39;http://************/wxlogin&#39;,
								data: {
									code: res.code
								},
								success(res) {
									//将openid存入本地缓存
									uni.setStorage({
										key: &#39;openid_key&#39;,
										data: res.data.openid
									});
									if (res.statusCode == 200 && res.data && res.data.username) {
										self.isFirstWXLogin = false;
										self.name = res.data.username;
										self.password = res.data.password;
										setTimeout(function() {
											self.tologin({
												username: res.data.username,
												password: res.data.password,
												encrypted: true
											})
										}, 0)
									} else {
										//首次登录，可以跳转到一个绑定账号的页面
										uni.navigateTo({
											url: &#39;wxlogin&#39;
										});
								}
							})
						} else {
							console.log(&#39;登录失败！&#39; + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e);
					}
				});
			}

2. WeChat으로 로그인하고 사용자의 고유 식별자를 가져옵니다

이 단계는 서버 측에 배치됩니다. 참고용으로 노드가 작성한 인터페이스입니다. :

router.post("/wxlogin", (req, res, next) => {
    //将请求地址的url后面的参数拼接起来
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查询
    var content = querystring.stringify(data);
    // 根据微信开发者文档给的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 对url发出一个get请求
    request({
        'url': url
    }, (error, response, body) => {
        // 将body的内容解析出来
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根据openid查找用户，如果查到则返回用户名密码登录，否则直接提示登录
        getAllUsers(abody, res)
    })
})

위 코드는 참고용일 뿐입니다. appId, appSecret(이 둘은 백엔드에 구성되거나 데이터베이스에 존재함) 및 코드 매개변수를 사용하는 것입니다. api.weixin.qq.com/sns/jscode2…

3. 프런트엔드는 사용자 정보를 로컬 캐시에 저장합니다

이 단계는 인증 후에 호출할 수 있습니다. 귀하의 실제 필요에 따라 아바타 및 WeChat 등을 저장하는 데 사용할 필요는 없습니다. uni 관련 API에 익숙하지 않다면 먼저 api 문서를 읽어보세요.

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});

알겠습니다. 미니 프로그램 로그인의 기본 단계는 여기까지입니다. 도움이 되셨다면 좋아요 부탁드립니다.

추천: "uniapp 튜토리얼"

위 내용은 유니앱 미니프로그램 위챗 로그인 기능 구현 방법 (프로세스 요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!