uniapp WeChat 애플릿에 로그인하는 방법

WeChat 미니 프로그램의 인기와 함께 점점 더 많은 사람들이 WeChat 미니 프로그램 개발에 관심을 기울이고 있습니다. 이 과정에서 로그인 모듈은 필수 불가결하며 Uniapp도 인기 있는 WeChat 애플릿 개발 프레임워크가 되었습니다. 그렇다면 Uniapp WeChat 애플릿에 로그인하는 방법은 무엇입니까? 아래에서 자세히 살펴보겠습니다.

1. WeChat 개발자 플랫폼 구성

WeChat 미니 프로그램에 로그인하기 전에 WeChat 개발자 플랫폼에서 관련 구성을 수행해야 합니다. 먼저 "개발" -> "개발 설정" -> "개발자 도구"에서 "서비스 포트"를 열고 자신의 IP 주소를 입력하세요.

둘째, "개발" -> "개발 설정" -> "미니 프로그램 배경 구성"에서 미니 프로그램 "법적 도메인 이름 요청"을 추가하세요.

그런 다음 미니 프로그램의 AppID와 AppSecret을 가져와서 "설정" -> "개발자 도구" -> "개발 설정"에서 확인해야 합니다.

2. Uniapp 구성

MicroMessenger-uni의 조건부 컴파일에서는 직접 작성하거나 인터넷에서 다운로드할 수 있는 wx-auth.js 파일을 먼저 도입해야 합니다.

App.vue의 onLaunch에서 Openid를 얻기 위해 WeChat 애플릿의 AppID, AppSecret 및 배경 주소를 구성합니다.

다음 단계에서는 로그인 인터페이스를 호출할 때 wx-auth.js에서 코드를 가져오는 메소드를 작성해야 합니다.

getLoginCode() { return new Promise((resolve, reject) => { uni.login({ success: (res) => { if (res.code) { resolve(res.code) } else { reject(res) } }, fail: (err) => { reject(err) } }) }) }

그런 다음 wx-auth.js에서 Openid를 가져오는 메소드를 작성합니다.

getOpenId(appid, secret, code) { return new Promise((resolve, reject) => { uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code', success: (res) => { resolve(res) }, fail: (err) => { reject(err) } }) }) }

마지막으로 , in 프로젝트의 로그인 페이지에서 로그인 메소드를 작성할 수 있습니다:

async login() { let code = await this.getLoginCode() let res = await this.getOpenId(this.appid, this.secret, code) console.log(res) // 在这里可以将Openid和其他用户信息存入后台，实现登录功能 }

3. WeChat 애플릿 구현

WeChat 애플릿의 코드를 가져오려면 로그인 버튼에서 wx.login 메소드를 호출해야 합니다. 그런 다음 백엔드로 Go 코드를 전달하고 백엔드에서 Openid 및 기타 사용자 정보를 얻은 후 로그인 기능을 구현합니다.

다음은 wx.login 메소드를 호출하는 WeChat 애플릿의 예입니다.

wx.login({ success(res) { if (res.code) { //将code传到后台获取Openid } else { console.log('登录失败！' + res.errMsg) } }, fail(err) { console.log('登录失败！' + err.errMsg) } })

IV. 요약

위 단계를 통해 Uniapp WeChat 애플릿의 로그인 기능을 구현할 수 있습니다. 실제 로그인 프로세스를 구현하려면 WeChat 애플릿 로그인을 백엔드 API 인터페이스와 공동으로 디버깅하고 백엔드에서 반환 정보를 가져와야 한다는 점에 유의해야 합니다. 동시에, 로그인 과정에서 OpenID 등 사용자의 개인정보가 유출되거나 남용되지 않도록 보호해야 합니다.

위 내용은 uniapp WeChat 애플릿에 로그인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!