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

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

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

효과 달성

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

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

.

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

콘크리트 구현

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!