WeChat 웹페이지에서 승인된 로그인을 구현하는 Ajax 방법(그래픽 튜토리얼)

이 글에서는 WeChat 웹 페이지에서 인증된 로그인을 구현하는 ajax 방법을 주로 소개하고 참고용으로 제공합니다.

프로젝트 배경

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

요구사항 분석

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

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

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

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

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

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

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

기능 구현

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

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

빌드 the 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 We 연결을 보면 appId,redirect_uri 2개의 변수가 있음을 알 수 있습니다. 말할 필요도 없이 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)
      }
    })
  }

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS 구현 ajax 배경 정의 호출(코드 포함)

ajax+php 제어 함수 호출 단계 자세한 설명

로딩 효과의 Ajax 구현

위 내용은 WeChat 웹페이지에서 승인된 로그인을 구현하는 Ajax 방법(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!