노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석

青灯夜游
풀어 주다: 2022-11-02 13:36:15
앞으로
1653명이 탐색했습니다.

Weibo에 제3자 로그인 방법은 무엇인가요? 다음 글에서는 node를 사용하여 Weibo에서 제3자 로그인을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석

등록 없이도 Weibo 제3자 로그인에 액세스할 수 있어 더 나은 사용자 경험을 제공합니다. 오늘은 nodejs를 사용하여 Weibo 제3자 로그인을 구현하겠습니다(다른 언어도 가능). [관련 튜토리얼 추천: nodejs 동영상 튜토리얼]

효과 달성

온라인 예시: http://www.lombbs.com/login

1 Weibo 로그인 버튼을 클릭해 로그인하세요

. 노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석

2. QR코드를 스캔하면 바로 로그인

콘크리트 구현

1. 웨이보 홈페이지 접속 신청

https://open.weibo.com/connect에 로그인하여 신청 웹사이트 접속용
로컬에서 개발할 때 애플리케이션 주소를 적어주세요: 127.0.0.1

노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석
노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석
노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석

2. 버튼을 클릭해 OAuth2.0 인증을 사용해 웨이보

에 로그인하세요. https://open.weibo.com/wiki/ Connect/login

문서를 참조하세요. 1. Weibo 로그인 인증 확인 코드 생성
const weiboUrl = `https://api.weibo.com/oauth2/authorize?client_id=${weiboConfig.appKey}&response_type=code&redirect_uri=${weiboConfig.redirectUrl}`
로그인 후 복사

appKey: 성공적으로 애플리케이션을 생성한 후 Weibo에서 제공하는 appKey
RedirectUrl: 사용자 인증이 성공한 후 리디렉션되는 프런트 엔드 페이지입니다. 여기에 작성한 내용은 http://127.0.0.1:8080/login

2입니다. 인증 페이지로 이동하여 사용자 코드를 받으세요

사용자가 로그인할 수 있는 권한이 있으면 이전 단계에서 작성한 리디렉션Url로 이동하고 사용자 코드를 가져옵니다. URL은 http://127.0.0.1:8080/login?code=abcdef

vue가 수신하는 것과 유사합니다. URL에 코드가 있으면 백엔드 로그인 콜백 인터페이스

created() {
    const { code } = this.$route.query;
    if (code) {
      loginCallback({ code }).then((res) => {
        this.$message({
          message: `${res.nickname} 欢迎您`,
          type: "success",
        });
        this.setUser(res);
        this.$router.push("/tool/qr");
      });
    }
  }
로그인 후 복사
3를 요청합니다. 백엔드 로그인 콜백 인터페이스는 사용자 코드 accessToken을 통해 얻은 다음 accessToken을 통해 사용자 정보를 얻습니다. login
   async loginCallback(ctx) {
      let { code } = ctx.request.body
      if (!code) {
         return ctx.error(errCode.PARAMS_ERROR, '参数错误')
      }
      // 获取accessToken
      const { access_token, uid } = await got.post('https://api.weibo.com/oauth2/access_token', {
         form: {
            client_id: weiboConfig.appKey,
            client_secret: weiboConfig.appSecret,
            grant_type: 'authorization_code',
            redirect_uri: weiboConfig.redirectUrl,
            code
         }
      }).json()
      // 通过accessToken获取UserInfo
      const { id, name: nickname, avatar_hd: avatar } = await got.get(`https://api.weibo.com/2/users/show.json?access_token=${access_token}&uid=${uid}`).json()
      // 在自己的系统内创建User
      let [user, isCreate] = await WeiboUser.upsert({ id, nickname, avatar })
      // 生成登录Token,通过userType区分是微博登录用户还是系统账号登录用户
      const token = await jwt.createToken({ ...user.toJSON(), userType: 'weiboUser' })
      return ctx.success({ nickname, avatar, token })
   }
로그인 후 복사

3. Weibo 스캔 코드 login

1. Weibo 스캔 코드 로그인 QR 코드 생성
 async getWeiboLoginQr(ctx) {
      const qrApi = `https://api.weibo.com/oauth2/qrcode_authorize/generate?client_id=${weiboConfig.appKey}&redirect_uri=${weiboConfig.redirectUrl}&scope=&response_type=code&state=&__rnd=${Date.now()}`
      const { url, vcode } = await got.get(qrApi).json()
      return ctx.success({ weiboQrUrl: url, vcode })
}
로그인 후 복사

반환된 URL은 Weibo 로그인 QR 코드 코드 URL이며, vcode는 이 QR 코드의 고유 식별자와 동일합니다. , 사용자가 코드를 스캔했는지 확인하는 데 사용됩니다

2. 프런트 엔드는 코드를 스캔하여 이 QR 코드가 인증되었는지 확인하기 위해 지속적으로 폴링합니다.

Front-end:

 const id = setInterval(() => {
          getWeiboLoginQrStatus({ vcode }).then((res) => {
            const { status, url } = res;
            if (status === "3") {
              window.location = url;
              clearInterval(id);
            }
          });
}, 3000);
로그인 후 복사

Back-end:

   async getWeiboLoginQrStatus(ctx) {
      const { vcode } = ctx.request.query
      if (!vcode) {
         return ctx.error(errCode.PARAMS_ERROR, '参数错误')
      }
      const queryQrApi = `https://api.weibo.com/oauth2/qrcode_authorize/query?vcode=${vcode}&__rnd=${Date.now()}`
      const { status, url } = await got(queryQrApi).json()
      return ctx.success({ status, url })
   }
로그인 후 복사

상태가 3이면 코드 사용자가 코드를 스캔하여 인증한 것이며, 반환되는 URL은 로그인 버튼을 클릭한 후 반환되는 프런트엔드 콜백 URL입니다. 이후 단계는 2와 완전히 동일합니다. 인증 페이지로 이동하여 사용자 코드를 얻습니다.

노드 관련 지식을 더 보려면 nodejs 튜토리얼을 방문하세요!

위 내용은 노드가 Weibo에서 제3자 로그인을 수행하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!