메인 콘텐츠로 건너뛰기
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로 로그인 구현하기

브라우저 및 모바일 웹에서의 X로 로그인 구현은 OAuth를 기반으로 합니다. 이 페이지는 로그인 플로우에서 액세스 토큰을 얻는 데 필요한 요청을 보여줍니다. “X로 로그인” 플로우를 사용하려면 X 앱 설정으로 이동해 “이 앱을 X로 로그인에 사용할 수 있도록 허용하시겠습니까?” 옵션이 활성화되어 있는지 확인하세요. 이 페이지는 독자가 OAuth 1.0a 프로토콜로 요청에 서명하는 방법을 알고 있다고 가정합니다. 요청 서명 방법이 궁금하다면 요청 승인하기 페이지를 참조하세요. 이 페이지의 요청 서명을 검증해 보고 싶다면 사용된 consumer secret은 다음과 같습니다: L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg. 이 값은 테스트용이며 실제 요청에는 작동하지 않습니다. 요청 토큰 획득, 사용자 리디렉션, 요청 토큰을 액세스 토큰으로 변환하는 과정을 통해 X로 로그인을 구현하는 세 가지 단계는 아래에 나열되어 있습니다.
  • 1단계
  • 2단계
  • 3단계

1단계: 요청 토큰 받기

로그인 플로우를 시작하려면 X 앱이 서명된 메시지를 POST oauth/request_token으로 보내 요청 토큰을 받아야 합니다. 이 요청에서 유일하게 고유한 파라미터는 oauth_callback이며, 사용자가 2단계를 완료한 뒤 리디렉션될 대상 URL을 URL 인코딩한 값이어야 합니다. 나머지 파라미터는 OAuth 서명 과정에서 추가됩니다.
참고: POST oauth/request_token 엔드포인트와 함께 사용하는 모든 콜백 URL개발자 포털X 앱 설정에 등록되어 있어야 합니다.
예시 요청(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 상태 코드를 확인해야 합니다. 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

  • 추가 리소스
  • 브라우저 로그인 플로우
  • 모바일 로그인 플로우

X로 로그인 리소스

클라이언트 라이브러리

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

브랜드 툴킷

일관된 브랜딩을 위해 공식 X Brand Toolkit 사용을 권장합니다. 해당 애셋을 저장해 ‘Login with X’ 버튼을 만들 때 사용하세요.