WeChat 웹페이지에서 인증된 로그인을 구현하는 ajax 방법 소개

WeChat 웹페이지 인증 로그인은 모든 사람이 학습할 수 있도록 돕는 매우 일반적인 기능입니다. 이번 글에서는 WeChat 웹 페이지에서 인증된 로그인을 구현하는 ajax 방식을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 이를 여러분과 공유하고 참고용으로 제공하겠습니다. 에디터 따라가서 함께 살펴볼까요

프로젝트 배경

프로젝트는 프론트엔드와 백엔드가 완전히 분리된 솔루션을 채택하기 때문에 기존의 WeChat 인증 로그인 방식은 사용할 수 없으며, ajax는 WeChat 인증 로그인을 구현하는 데 사용됩니다.

요구사항 분석

저는 phper이기 때문에 WeChat 개발은 EasyWeChat을 사용하므로 구현 방법은 EW를 기반으로 합니다.

사실 이를 구현하는 것이 번거롭습니다. 구현하기 전에 WeChat 인증의 전체 프로세스를 이해해야 합니다.

1. 사용자를 인증 페이지로 안내하여 인증에 동의하고 코드를 받습니다

2. 웹페이지 인증 access_token(기본 지원의 access_token과 다름)의 코드로 교환

3. 필요한 경우 개발자 만료를 방지하기 위해 웹페이지 승인 access_token을 새로 고칠 수 있습니다

4. 웹 페이지 승인 access_token 및 openid를 통해 사용자 기본 정보를 얻습니다(UnionID 메커니즘 지원)

사실, 직설적으로 말하면 프런트 엔드는 한 가지 작업만 하면 됩니다 , 사용자에게 WeChat 인증 페이지를 시작하도록 안내한 다음 코드를 얻은 다음 현재 페이지로 이동한 다음 사용자 및 기타 관련 정보에 대한 대가로 백엔드를 요청합니다.

기능 구현

사용자에게 WeChat 인증 확인 페이지를 불러오도록 안내합니다

여기서 두 가지 작업을 수행해야 합니다. 먼저 jsapi 도메인 이름을 구성하고 두 번째로 WeChat 웹페이지 인증을 위한 콜백 도메인 이름을 구성합니다

WeChat 인증 URL 구축 "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 연결을 보면 appId와 direct_uri라는 두 가지 변수가 있음을 알 수 있습니다. 말할 필요도 없이 appId는 우리가 승인하려는 WeChat 공식 계정의 appId이고, 다른 콜백 URL은 실제로 현재 페이지의 URL입니다.

1. 사용자가 WeChat에 로그인하고 승인한 후 다시 호출되는 URL은 두 개의 매개변수를 전달합니다. 첫 번째는 코드이고 다른 하나는 상태입니다. 우리가 해야 할 일은 코드를 얻어 백엔드에 전달하기만 하면 되고, 백엔드는 코드를 통해 사용자의 기본 정보를 얻을 수 있습니다.

2. 백엔드가 코드를 가져온 후 사용자의 기본 정보를 가져오고 기타 관련 정보를 프런트엔드에 반환한 다음 로컬 저장이나 기타 작업을 수행합니다.

function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}
function wxLogin(callback) {
  var appId = 'xxxxxxxxxxxxxxxxxxx';
  var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
  var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
  var code = getUrlParam("code");
  if (!code) {
    window.location = url;
  } else {
    $.ajax({
      type: 'GET',
      url: oauth_url,
      dataType: 'json',
      data: {
        code: code
      },
      success: function (data) {
        if (data.code === 200) {
          callback(data.data)
        }
      },
      error: function (error) {
        throw new Error(error)
      }
    })
  }

위 내용은 모든 분들의 공부에 도움이 되길 바라며, 또한 PHP 중국어 홈페이지를 응원해주시기 바랍니다.

관련 추천:

WeChat 웹페이지 승인 안드로이드 로그인에 실패했습니다! iOS에서의 성공!

위 내용은 WeChat 웹페이지에서 인증된 로그인을 구현하는 ajax 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!