개발 전략_클라이언트 측

읽기 전제

이 개발 가이드는 액세스 토큰을 얻기 위해 암시적 부여 방법을 사용하는 권한 확인 프로세스에 적합합니다. , 클라이언트 접속을 통해 접속해야 하는 경우, 예를 들어 브라우저의 자바스크립트 코드를 통해 접속해야 하거나, 컴퓨터/모바일 단말에서 클라이언트에서 접속할 때 적합합니다.

이 개발 가이드를 읽기 전에 [QQ 로그인] 암시적 부여를 사용하여 액세스 토큰 얻기를 읽고 인증 프로세스를 이해하세요.

1. 경험해 보세요

1. 브라우저 접속: http://qzs.qq .com /qzone/openapi/client.html .
2 페이지에서 "로그인" 버튼을 클릭하세요:

3 팝업 로그인 상자에 QQ 계정과 비밀번호를 입력하세요:
#🎜 🎜## 🎜🎜#4. 성공적으로 로그인한 후 URL에 액세스 토큰을 사용하여 지정된 콜백 주소로 이동합니다:

# 🎜 🎜#2. 빨리 시작하세요

준비

1. 해당 웹사이트에서 QQ 로그인 신청서를 제출하고 appid와 appkey를 성공적으로 획득했습니다. 2 접속을 신청하세요. 웹사이트와 Qzone 간의 원활한 연결을 위해 서버에서 openapi.qzone.qq.com을 ping해 주세요.

1단계: QQ 로그인 버튼 배치

웹사이트에서 "QQ 로그인" 버튼을 다운로드해야 합니다. 이미지를 클릭하고 페이지의 적절한 위치에 UI 사양 배치 버튼을 따르세요. 버튼 아이콘 다운로드 버튼 배치 사양

2단계: 액세스 토큰 가져오기

1. 브라우저에서 다음 주소를 방문하세요(client_id, 리디렉션_uri, 범위 및 기타 매개변수 값을 자신의 것으로 바꾸세요):

https://graph.qq.com / oauth2.0/authorize?response_type=token&client_id=[YOUR_APPID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE]

2. 이미 로그인한 경우 확인 페이지가 나타납니다. 로그인하지 않은 경우 아래 그림과 같이 로그인 페이지가 나타납니다.

3. 로그인에 성공하면 사용자에게 인증을 안내하는 인증 상자가 나타납니다. (인증 페이지는 다음과 같은 경우에만 나타납니다.)

참고:
사용자가 허용하지 않으면 접근 작업이 중단됩니다.
타사 애플리케이션이 인증 항목을 제어하는 것이 좋습니다. 즉, 사용해야 하는 OpenAPI 이름만 매개변수 값 범위에 전달됩니다. 인증 항목이 많을수록 사용자가 인증을 거부할 확률이 높아지기 때문입니다.

4. 사용자가 승인을 허용하면 지정된 리디렉션_uri로 성공적으로 점프하고, URL 뒤에 "#"을 추가하고, 액세스 토큰,expires_in 및 기타 매개변수를 가져옵니다. 리디렉션_uri 주소 뒤에 이미 "#" 기호가 있는 경우 "&" 기호를 추가하고 해당 반환 매개변수를 가져옵니다. 예를 들어 콜백 주소가 www.qq.com이면 다음으로 이동합니다.

http://www.qq.com/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600

특별 팁:
1 요청 시 전달된 리디렉션_uri는 등록 시 입력한 콜백 주소와 일치해야 하며 타사 애플리케이션 인증에 사용됩니다.
2. js 메소드(window.location.hash)를 사용하여 URL에서 # 뒤의 매개변수 값을 가져올 수 있습니다. 자세한 내용은 아래 샘플 코드를 참조하세요.
3. 토큰을 저장하려면 js를 사용하는 것이 좋습니다.
4. 획득한 액세스 토큰은 3개월 동안 유효하며 사용자가 다시 로그인하면 자동으로 새로 고쳐집니다.

3단계: 액세스 토큰을 사용하여 사용자의 OpenID를 얻습니다

1. 다음 주소로 요청을 보냅니다(access_token 및 기타 매개변수 값을 자신의 값으로 바꾸세요):

https: //graph .qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN

2. 사용자 OpenID를 얻고 다음 패키지를 반환합니다:

callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );

4단계: 액세스 토큰 및 OpenID를 사용하여 사용자 데이터에 액세스하고 수정

1 사용자가 로그인한 후 웹사이트에서 get_user_info 인터페이스를 호출하여 사용자의 아바타와 닉네임을 가져와 웹사이트에 표시하는 것이 좋습니다. 통합된 사용자 경험을 개선합니다.
2. 다른 OpenAPI를 호출하여 사용자 데이터에 액세스하고 수정합니다. OpenAPI에 대한 자세한 사항은 [QQ 로그인] API 문서를 참고하시기 바랍니다.

get_user_info 인터페이스 호출을 예로 들어 보겠습니다.
(1) get_user_info의 URL로 요청을 보냅니다(access_token, appid 및 기타 매개변수 값을 자신의 값으로 바꾸세요):

https://graph. qq.com/user /get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID

(2) 성공적인 반환 후 사용자 데이터를 얻을 수 있습니다.

{

   "ret":0,
   "msg":"",
   "nickname":"YOUR_NICK_NAME",
   ...

}

3. 샘플 코드

아래에 JavaScript 샘플이 나와 있습니다. (실행하려면 주석에 따라 코드의 일부만 수정하면 됩니다.)

<html>