X로 로그인

Log in with X(또는 Sign in with X)를 사용하면 사이트나 애플리케이션에 버튼을 두어 X 사용자가 한 번의 클릭만으로 등록된 사용자 계정이 제공하는 혜택을 누릴 수 있습니다. 이는 웹사이트, iOS, 모바일 및 데스크톱 애플리케이션에서 모두 사용할 수 있습니다.

​

기능

• 사용 편의성 - 사이트에 처음 방문한 사용자는 처음 로그인할 때 두 번의 클릭만으로 완료할 수 있습니다.
• X 통합 - Log in with X 플로우를 통해 사용자 권한을 위임받아 사용자를 대신해 X API를 사용할 수 있습니다.
• OAuth 기반 - 다양한 클라이언트 라이브러리와 예제 코드가 Log in with X API와 호환됩니다.

​

사용 가능 환경

• 브라우저 - 사용자가 브라우저에 접속할 수 있다면 Log in with X를 연동할 수 있습니다. 브라우저 로그인 플로우에 대해 알아보세요.
• 모바일 기기 - 웹에 연결된 모든 모바일 기기에서 Log in with X를 사용할 수 있습니다. 모바일 로그인 플로우에 대해 알아보세요.

​

X로 로그인 구현하기

브라우저 및 모바일 웹에서의 Log in with X 구현은 OAuth를 기반으로 합니다. 이 페이지에서는 로그인 플로우에서 액세스 토큰을 얻는 데 필요한 요청들을 보여줍니다.

“Log in with X” 플로우를 사용하려면, X app 설정으로 이동하여 “Allow this app to be used to Sign in with X?” 옵션이 활성화되어 있는지 확인하세요.

이 페이지는 독자가 OAuth 1.0a 프로토콜을 사용해 요청에 서명하는 방법을 알고 있다고 가정합니다. 요청에 서명하는 방법을 알고 싶다면 요청 승인하기 페이지를 읽어보세요.

이 페이지의 요청 서명을 확인하고 싶다면, 사용된 consumer secret은 다음과 같습니다: L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg. 이 값은 테스트용이며 실제 요청에는 동작하지 않습니다.

요청 토큰을 얻고, 사용자를 리디렉트한 뒤, 요청 토큰을 액세스 토큰으로 전환하는 과정을 통해 X로 로그인을 구현하는 세 단계는 아래와 같습니다.

1단계

​

1단계: 요청 토큰 받기

로그인 흐름을 시작하려면 X app은(는) 서명된 메시지를 POST oauth/request_token 엔드포인트로 보내 요청 토큰을 받아야 합니다. 이 요청에서 유일한 매개변수는 oauth_callback 하나이며, 이는 사용자가 2단계를 완료했을 때 리디렉션되기를 원하는 URL을 URL 인코딩한 값이어야 합니다. 나머지 매개변수들은 OAuth 서명 과정에서 추가됩니다.

참고: POST oauth/request_token 엔드포인트와 함께 사용하는 모든 callback URL은(는) 개발자 콘솔 내 X app 설정에 반드시 등록되어 있어야 합니다.

요청 예시 (Authorization 헤더는 줄바꿈되어 표시됨):

POST /oauth/request_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.x.com
Accept: */*
Authorization:
        OAuth oauth_callback="http%3A%2F%2Flocalhost%2Fsign-in-with-twitter%2F",
              oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
              oauth_nonce="ea9ec8429b68d6b77cd5600adbbb0456",
              oauth_signature="F1Li3tvehgcraF8DMJ7OyxO4w9Y%3D",
              oauth_signature_method="HMAC-SHA1",
              oauth_timestamp="1318467427",
              oauth_version="1.0"

앱은 응답의 HTTP 상태 코드를 확인해야 합니다. HTTP 상태 코드가 200이 아닌 경우는 모두 실패를 의미합니다. 응답 본문에는 oauth_token, oauth_token_secret, oauth_callback_confirmed 매개변수가 포함됩니다. 앱은 oauth_callback_confirmed가 true인지 확인하고, 나머지 두 값을 다음 단계에서 사용할 수 있도록 저장해야 합니다.

예시 응답(응답 본문은 줄바꿈 처리되었습니다):

HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:06 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 146
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
oauth_token_secret=veNRnAWe6inFuo8o2u8SLLZLjolYDmDP7SzL0YfYI&
oauth_callback_confirmed=true

2단계

​

2단계: 사용자 리디렉션

다음 단계는 사용자가 아래의 브라우저 로그인 플로우에 설명된 대로 적절한 플로우를 완료할 수 있도록 X로 리디렉션하는 것입니다. 사용자를 GET oauth/authenticate로 리디렉션하고, 1단계에서 획득한 request token을 oauth_token 매개변수로 전달해야 합니다.

웹사이트에서 이를 구현하는 가장 자연스러운 방법은 원래의 “sign in” 요청에 대한 응답으로 HTTP 302 리디렉션을 보내는 것입니다. 모바일 및 데스크톱 App은 새 브라우저 창을 열거나 임베디드 웹 뷰를 통해 해당 URL로 이동해야 합니다.

리디렉션할 예시 URL:

https://api.x.com/oauth/authenticate?oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0

sign in 엔드포인트는 사용자의 상태에 따라 다음 세 가지 방식 중 하나로 동작합니다:

1. 로그인되어 있고 승인됨: 사용자가 x.com에 로그인되어 있고 이미 호출하는 애플리케이션을 승인한 경우, 즉시 인증되고 유효한 OAuth request token과 함께 callback URL로 반환됩니다. x.com으로의 리디렉션은 사용자에게 거의 눈에 띄지 않습니다.
2. 로그인되어 있으나 승인되지 않음: 사용자가 x.com에 로그인되어 있지만 호출하는 애플리케이션을 승인하지 않은 경우, 호출 애플리케이션에 대한 액세스 공유 요청이 표시됩니다. 사용자가 이 인증 요청을 수락하면, 유효한 OAuth request token과 함께 callback URL로 리디렉션됩니다.
3. 로그인되어 있지 않음: 사용자가 x.com에 로그인되어 있지 않은 경우, 동일한 화면에서 자격 증명을 입력하고 애플리케이션이 자신의 정보에 액세스하도록 권한을 부여하라는 메시지가 표시됩니다. 로그인에 성공하면, 유효한 OAuth request token과 함께 callback URL로 반환됩니다.

인증이 성공하면, callback_url은 oauth_token 및 oauth_verifier 매개변수를 포함하는 요청을 받게 됩니다. 애플리케이션은 해당 token이 1단계에서 받은 request token과 일치하는지 검증해야 합니다.

클라이언트 리디렉션에서 온 요청(쿼리스트링 매개변수 감싸서 표시됨):

GET /sign-in-with-twitter/?
        oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
        oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.5 (KHTML, like Gecko) Chrome/16.0.891.1 Safari/535.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost/sign-in-with-twitter/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

3단계

​

3단계: 요청 토큰을 액세스 토큰으로 변환하기

요청 토큰을 사용 가능한 액세스 토큰으로 변환하려면, 애플리케이션에서 2단계에서 얻은 oauth_verifier 값을 포함하여 POST oauth/access_token 엔드포인트로 요청을 보내야 합니다. 요청 토큰은 헤더의 oauth_token 부분에도 포함되지만, 이는 서명 과정에서 자동으로 추가됩니다.

요청 예시(Authorization 헤더 줄바꿈 포함):

POST /oauth/access_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.x.com
Accept: */*
Authorization: OAuth oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
                      oauth_nonce="a9900fe68e2573b27a37f10fbad6a755",
                      oauth_signature="39cipBtIOHEEnybAR4sATQTpl2I%3D",
                      oauth_signature_method="HMAC-SHA1",
                      oauth_timestamp="1318467427",
                      oauth_token="NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0",
                      oauth_version="1.0"
Content-Length: 57
Content-Type: application/x-www-form-urlencoded

oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY

성공한 응답에는 oauth_token, oauth_token_secret 매개변수가 포함됩니다. 토큰과 토큰 시크릿 값은 저장해 두었다가 이후 X API에 인증된 요청을 보낼 때 사용해야 합니다. 사용자 신원을 확인하려면 GET account/verify_credentials를 사용하세요.

예시 응답(응답 본문은 줄바꿈 처리되어 있음):

HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:08 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 157
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=7588892-kagSNqWge8gB1WwE3plnFsJHAZVfxWD7Vb57p0b4&
oauth_token_secret=PbKfYqSryyeKDWz4ebtY3o5ogNLG11WJuZBc9fQrQo

추가 리소스

​

X로 로그인 관련 리소스

​

Client 라이브러리

X libraries에 나열된 Client 라이브러리는 Log in with X를 구현하는 데 도움이 됩니다. 앞 단계에서 설명한 대로 /oauth/authenticate 엔드포인트를 사용하세요.

​

Brand Toolkit

X는 일관된 브랜딩을 위해 공식 X Brand Toolkit을 애플리케이션에서 사용하기를 권장합니다. 이 에셋을 저장해 두었다가 ‘Login with X’ 버튼을 만들 때 사용하세요.

브라우저 로그인 플로우

브라우저 로그인 플로우는 웹 브라우저를 열거나 임베드할 수 있는 웹사이트 및 애플리케이션에 적합합니다. 개략적인 흐름은 다음과 같습니다.

• 애플리케이션이 “Sign in with X” 링크 또는 버튼을 렌더링합니다.
• 사용자가 로그인 버튼을 클릭합니다.
• 현재 웹 브라우저가 X로 리디렉트되거나, 새 브라우저가 열리면서 X로 이동합니다.
• 필요하다면 사용자가 X에서 로그인 및 권한 부여 단계를 완료합니다.
• X가 사용자에 대한 권한 부여 정보를 전달하면서, 애플리케이션이 제어하는 URL로 다시 리디렉트합니다.

X는 권한 부여 상태를 추적하므로, 이미 X.com에 로그인되어 있고 애플리케이션에 권한을 부여한 사용자에게는 UI가 표시되지 않으며 자동으로 애플리케이션으로 리디렉트됩니다.

​

데스크톱 플로우

위에 표시된 웹사이트(“The greatest website ever created”)가 랜딩 페이지의 Sign in with X 버튼에서 알 수 있듯이, 이 API를 구현했다고 가정해 보겠습니다.

사용자가 Sign in 버튼을 클릭하면, 현재 X에 로그인되어 있는지, 그리고 이전에 애플리케이션에 계정 접근을 허용했는지 여부에 따라 보이는 페이지가 달라집니다.

사용자가 x.com에 로그인되어 있지만 아직 접근을 허용하지 않은 경우, 요청된 권한 목록과 함께 Sign In 및 Cancel 버튼이 표시됩니다.

사용자가 x.com에 로그인되어 있지 않은 경우, 사용자 이름과 비밀번호를 입력할 수 있는 입력 필드가 표시됩니다. 또한 사용자가 이미 애플리케이션에 접근을 허용한 상태라 하더라도, 권한 목록은 계속해서 표시된다는 점에 유의하세요.

사용자가 유효한 자격 증명을 입력(필요한 경우)하고 “Sign In”을 클릭하면, X는 사용자를 로그인 플로우를 시작한 웹사이트로 리디렉트합니다.

사용자가 이미 x.com에 로그인되어 있고 해당 웹사이트에 접근 권한을 부여한 상태라면, 이 리디렉트는 즉시 발생합니다.

모바일 로그인 플로우

모바일 웹 브라우저의 UI 플로우는 브라우저 로그인 플로우와 완전히 동일하지만, 모바일 브라우저에 맞게 최적화되어 있습니다.

아래는 로그인 상태, 로그아웃 상태, 리디렉트 화면의 스크린샷입니다.