OAuth 공급자(Provider) 계정 만들기

안녕하세요. :smile:

SlogOAuth 인증을 위한 공급자(Provider) 계정 발급 방법에 대해 간단하게 공유하기 위한 공간입니다.

대부분 검색을 통해 손쉽게 개발자 계정을 만들고 OAuth 관련 키를 발급 받을 수 있지만 한 곳에 모아두면 유용할 것 같아 글을 작성하게 되었습니다.


주요 공급자는 계속해서 추가 예정입니다.

  • 구글 (바로 사용가능)
  • 페이스북 (바로 사용가능)
  • 트위터 (바로 사용가능)
  • 애플 (승인 절차 필요)
  • 깃허브 (바로 사용 가능함)
  • 카카오톡 (조건부 승인 절차 필요)

계정 발급 과정은 대체로 간단합니다.

  • GitHub, Naver, Google 같은 경우에는 절차가 워낙 편하게 되어있습니다. (1분컷)

  • 트위터와 페이스북은 10분 안에 만들 수 있습니다.

  • 카카오톡의 경우 간단하게 발급이 가능하지만 Email을 필수 수집항목으로 설정하기 위해서는 별도의 승인 요청이 필요한데 몇 시간 안에 금방 처리됩니다. (비즈니스 계정으로 전환)

    그리고 카카오톡은 개발자를 위한 별도의 채널을 운영하고 있는데 대응도 빠르고 아주 좋습니다.

    https://devtalk.kakao.com/

    인증 뿐만 아니라 카카오톡 연동 관련한 모든 기술지원을 이곳에서 빠르게 지원받을 수 있습니다.

  • 애플은 승인까지 수일이 소요되며 승인받기 위해 신분증 또는 여권까지 제출해야 합니다. (아직 기다리는 중입니다.)


읽어주셔서 감사합니다. :smile:

좋아요 6

구글 (Google)


구글 클라우드 플랫폼

https://console.cloud.google.com/

사용범위: 무료제공, 구글 계정 필요
(가입 후 즉시 API를 바로 발급 받을 수 있습니다.)

생성 방법

Google Cloud Platform > 사용자 인증 정보 > 사용자 인증 정보 만들기 > 웹사이트

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-google

API 키 명칭 구분

  • ClientId: 클라이언트 ID

  • ClientSecret: 클라이언트 보안 비밀


그밖에 Blazor 활용 정보 보기


참고 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

[인증] 구글 API를 통해 인증 연동하기 (javascript) : 네이버 블로그

구글 OAuth2 연동용 클라이언트 아이디 및 비밀번호 발급받는 방법 - BGSMM

좋아요 1

페이스북 (Facebook)


페이스북 개발자 센터

사용범위: 무료제공, 페이스북 계정 필요
(가입 후 즉시 API를 바로 발급 받을 수 있습니다.)

생성 방법

Facebook for Developers > 앱 만들기

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-facebook

API 키 명칭 구분

  • ClientId: 앱 ID

  • ClientSecret: 앱 시크릿 코드


그밖에 Blazor 활용 정보 보기


튜토리얼 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

Facebook 로그인 구현하기 – Che1's Blog

홈페이지에 페이스북 로그인 연동하기 :: DreamYoungs's Github Blog

좋아요 1

트위터 (Twitter)


트위터 개발자 포털 (Twitter Developer Potal)

사용범위: 무료제공, 트위터 계정 필요
(가입 후 즉시 API를 바로 발급 받을 수 있습니다.)

생성 방법

Developer Platform > Twitter Developer Potal > Projects & Apps > Create App

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-twitter

API 키 명칭 구분

  • ClientId: Consumer Keys > API Key

  • ClientSecret: Consumer Keys >Secret


그밖에 Blazor 연결정보


튜토리얼 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

트위터 API 사용을 위한 준비 (개발자 신청 및 Consumer Key, Access Token 발급) - 아무튼 워라밸

트위터 API 플랫폼과 OAuth – Access Token 얻기 – All code is guilty until proven innocent

좋아요 1

애플 (Apple)


애플은 인증 API를 발급받기 위해 Apple Developer Program 등록 신청 후 승인을 받아야 합니다. 승인까지 몇 일 정도 걸릴 수 있어요.

애플 개발자 (Apple Developer)

사용범위: 무료제공, 애플 계정 필요
(애플 개발자 프로그램 승인 후에 API를 발급 받을 수 있습니다.)

생성 방법

Apple Developer > 애플 개발자 프로그램 승인 > TBD...

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-apple

API 키 명칭 구분

  • ClientId: TBD…
  • ClientSecret: TBD…

그밖에 Blazor 연결정보


튜토리얼 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

앱스토어 애플 개발자계정 등록 – 스윙 도우미

이중 인증

아래는 애플에서 안내하는 인증 정책에 대한 내용입니다.

이중 인증 - 계정 관리 - 지원 - Apple Developer

좋아요 1

깃허브 (GitHub)


깃허브 Developer settings

사용범위: 무료제공, 깃허브 계정 필요
(자신의 깃허브 계정에서 즉시 발급 가능합니다.)

생성 방법

GitHub > Settings > Developer Settings > OAuth Apps > Register a new application

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-github

API 키 명칭 구분

  • ClientId: Client ID
  • ClientSecret: Client Secret

그밖에 Blazor 연결정보


튜토리얼 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

Github로 로그인하기! · GitHub

https://docs.github.com/en/developers/apps/building-oauth-apps

좋아요 1

카카오톡 (KakaoTalk)


TBD…

네이버 (Naver)


네이버와 라인은 각각 개발자센터를 따로 제공하고 있습니다.
(해당 내용은 라인이 아닙니다!)

네이버 개발자 센터 (Naver Developers)

https://developers.naver.com/apps/#/wizard/register

사용범위: 무료제공, 네이버 계정 필요
(가입 후 즉시 API를 바로 발급 받을 수 있습니다.)

생성 방법

Naver Developers > 내 애플리케이션

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-naver

API 키 명칭 구분

  • ClientId: Client ID

  • ClientSecret: Client Secret


그밖에 Blazor 활용 정보 보기


튜토리얼 사이트

아래는 참고한 글입니다. 자세한 설명과 이미지를 제공합니다.

네이버 아이디로 로그인 API 명세 - LOGIN