uniapp 애플릿 인증 로그인 프로세스에 대해 이야기해 보겠습니다.
모바일 인터넷이 대중화되면서 미니 프로그램은 사람들의 일상생활에 없어서는 안될 애플리케이션이 되었습니다. 개발자로서 미니 프로그램의 기능을 구현할 때 사용자 정보를 얻고 필요한 작업을 수행하기 위해 승인된 로그인이 필요한 경우가 많습니다. 이 글에서는 uniapp 애플릿의 인증 로그인 프로세스를 소개합니다.
1. 미니 프로그램 인증 로그인 소개
미니 프로그램 인증 로그인은 미니 프로그램 개발에서 가장 일반적인 시나리오 중 하나이며 상호 작용과 사용자 경험을 달성하는 중요한 수단 중 하나이기도 합니다. 인증된 로그인을 통해 미니 프로그램은 사용자의 아바타, 닉네임 및 기타 정보를 획득하고 보다 개인화된 서비스를 제공할 수 있습니다. 현재 미니 프로그램에 로그인하는 방법은 크게 위챗 인증 로그인과 휴대폰 번호 인증 로그인 두 가지가 있습니다. 위챗 인증 로그인은 위챗에서 제공하는 공식 로그인 방법입니다. 사용자는 QR 코드를 스캔하여 위챗을 통해 로그인할 수도 있고, 미니 프로그램에서 직접 로그인을 인증할 수도 있습니다. 휴대폰번호 인증 로그인은 휴대폰 번호와 인증번호를 입력하여 인증을 받은 후 로그인 하여야 합니다.
2.Uniapp 애플릿 인증 로그인 프로세스
uniapp 애플릿 인증 로그인 프로세스는 주로 다음 단계로 구성됩니다.
2.1 기본 사용자 정보 얻기
uniapp 프레임워크에 내장된 API를 사용하면 사용자의 기본 정보를 쉽게 얻을 수 있습니다. .사용자 관련 정보를 얻는 방법은 다음과 같습니다.
uni.getUserInfo({ success: function (res) { console.log(res.userInfo); } });
이 코드는 단순히 사용자 정보를 얻는 방법을 구현한 것입니다. 사용자가 로그인을 승인하면 미니 프로그램에서 사용자의 닉네임, 아바타 및 기타 정보를 쉽게 얻을 수 있습니다.
2.2 사용자가 로그인되어 있는지 확인
몇 가지 필요한 작업을 수행하기 전에 사용자가 미니 프로그램에 로그인했는지 확인해야 합니다. 이때 사용자의 로그인 상태를 확인해야 합니다. 로컬 저장소를 사용하여 사용자가 로그인했는지 확인할 수 있습니다.
//判断用户是否登录 function isLoggedIn() { const token = uni.getStorageSync('token'); return token ? true : false; }
2.3 서버에 로그인 상태 가져오기 요청
사용자가 로그인하지 않았거나 로그인 상태가 만료된 경우 사용자의 로그인 상태를 가져오기 위해 로그인 인터페이스를 통해 서버에 요청해야 합니다. 로그인 인터페이스를 요청하는 동안 uniapp에서 제공하는 로그인 인터페이스를 통해 임시 로그인 자격증명 코드도 받아야 합니다.
//获取登录凭证code uni.login({ provider: 'weixin', success(loginRes) { const code = loginRes.code; //调用登录接口 uni.request({ url: '接口地址', data: { code: code, }, success: function (res) { console.log('response from server', res); //将登录凭证存储到本地 uni.setStorageSync('token', res.data.access_token); }, fail: function (err) { console.log('err', err); } }); }, fail(err) { console.log('login fail', err); } });
2.4 인증 페이지로 이동
사용자가 로그인했는지 확인한 후 사용자가 로그인하지 않았거나 로그인 상태가 만료된 것으로 확인되면 인증 페이지로 이동하여 인증해야 합니다. 로그인.
//跳转到授权页面 function toAuthorizationPage(){ uni.navigateTo({ url: '/pages/authorize/index', success:function(res){ console.log('navigate success',res); }, fail:function(err){ console.log('navigate fail',err); } }) }
2.5 로그인 승인 및 사용자 정보 획득
인증 페이지로 이동한 후 WeChat에서 제공하는 API를 호출하여 사용자가 WeChat 로그인을 승인하고 사용자의 인증 정보를 얻을 수 있습니다. 사용자 정보를 얻는 구체적인 단계는 다음과 같습니다.
- 사용자 기본 정보를 얻기 위해
wx.getUserInfo
를 사용합니다. - 사용자 기본 정보를 얻은 후 사용자 정보 등록 또는 업데이트를 위해 서버에 제출합니다.
//获取用户信息 wx.getUserInfo({ success:function(res){ var userInfo = res.userInfo; //将用户信息提交到服务器进行注册或更新 uni.request({ url:'用户信息提交地址', method:"post", data:userInfo, success:function(res){ console.log('response from server',res); }, fail:function(err){ console.log('err',err); } }) }, fail:function(err){ console.log('get user info fail',err); } })
3. 요약
인증된 로그인은 Uniapp 애플릿 개발의 핵심 기능이자 사용자 상호 작용 및 경험을 달성하는 중요한 수단입니다. 이 글에서 소개한 인증된 로그인 프로세스는 미니 프로그램에 대한 일부 참조를 제공하여 인증된 로그인 기능을 더 쉽게 구현할 수 있도록 해줍니다. 물론 이 글의 길이가 제한되어 있기 때문에 승인된 로그인 기능에 대해 고려해야 할 세부 사항이 여전히 많습니다. 개발자는 특정 사례를 계속 탐색하고 연습하는 것이 좋습니다.
위 내용은 uniapp 애플릿 인증 로그인 프로세스에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사에는 Uni.share API를 사용하여 소셜 공유를 UNI-APP 프로젝트에 통합하는 방법에 대해 자세히 설명합니다. Share API, WeChat 및 Weibo와 같은 플랫폼에서 설정, 구성 및 테스트를 다룹니다.

기사는 UNI-APP에서 SASS 및 적은 전처리기를 사용하여 설정, 혜택 및 이중 사용을 자세히 설명합니다. 주요 초점은 구성과 장점에 있습니다. [159 자]

이 기사는 Uni-App의 애니메이션 API를 사용하는 방법, 애니메이션, 주요 기능 및 애니메이션 타이밍을 결합하고 제어하는 방법을 작성하고 적용하는 단계를 자세히 설명합니다. character count : 159

이 기사는 장치, 통합, 기능, UI/UX, 성능, 크로스 플랫폼 및 보안 테스트를 포함한 UniAPP 응용 프로그램에 대한 다양한 테스트 유형에 대해 설명합니다. 또한 크로스 플랫폼 호환성을 보장하고 JES와 같은 도구를 권장합니다.

이 기사는 코드 최적화, 리소스 관리 및 코드 분할 및 게으른로드와 같은 기술에 중점을 둔 UNIAPP 패키지 크기를 줄이기위한 전략에 대해 설명합니다.

이 기사는 로컬 데이터 관리를 위해 Uni-App의 스토리지 API (Uni.setStorage, uni.getStorage)를 사용하는 방법을 설명하고 모범 사례, 문제 해결 및 효과적인 사용을위한 제한 사항 및 고려 사항에 대해 설명합니다.

이 기사는 HBuilderx, WeChat 개발자 도구 및 Chrome Devtools와 같은 도구에 중점을 둔 UniAPP 개발을위한 디버깅 도구 및 모범 사례에 대해 설명합니다.

이 기사에는 공통, 구성 요소, 페이지, 정적 및 Unicloud와 같은 주요 디렉토리 및 app.vue, main.js, manifest.json, pages.json 및 uni.scss와 같은 중요한 파일을 설명하는 Uni-App 프로젝트의 파일 구조가 자세히 설명되어 있습니다. 이것이 어떻게 O.
