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 로그인을 승인하고 사용자의 인증 정보를 얻을 수 있습니다. 사용자 정보를 얻는 구체적인 단계는 다음과 같습니다.

1. 사용자 기본 정보를 얻기 위해 wx.getUserInfo를 사용합니다.
2. 사용자 기본 정보를 얻은 후 사용자 정보 등록 또는 업데이트를 위해 서버에 제출합니다.

//获取用户信息
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!