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

jamesnet214 · 7월 31, 2021, 1:17오후

안녕하세요.

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

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

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

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

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

GitHub, Naver, Google 같은 경우에는 절차가 워낙 편하게 되어있습니다. (1분컷)
트위터와 페이스북은 10분 안에 만들 수 있습니다.
카카오톡의 경우 간단하게 발급이 가능하지만 Email을 필수 수집항목으로 설정하기 위해서는 별도의 승인 요청이 필요한데 몇 시간 안에 금방 처리됩니다. (비즈니스 계정으로 전환)

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

https://devtalk.kakao.com/

인증 뿐만 아니라 카카오톡 연동 관련한 모든 기술지원을 이곳에서 빠르게 지원받을 수 있습니다.
애플은 승인까지 수일이 소요되며 승인받기 위해 신분증 또는 여권까지 제출해야 합니다. (아직 기다리는 중입니다.)

읽어주셔서 감사합니다.

jamesnet214 · 7월 31, 2021, 1:35오후

구글 (Google)

구글 클라우드 플랫폼

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

생성 방법

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

브라우저 요청 URL (ex)

예) https://localhost:5001

승인된 리디렉션 URI (ex)

https://localhost:5001/signin-google

API 키 명칭 구분

ClientId: 클라이언트 ID
ClientSecret: 클라이언트 보안 비밀

그밖에 Blazor 활용 정보 보기

참고 사이트

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

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

http://yoonbumtae.com/?p=2631

jamesnet214 · 7월 31, 2021, 1:41오후

페이스북 (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

https://dreamyoungs.github.io/tip/facebook-login-connect

jamesnet214 · 8월 1, 2021, 12:20오전

트위터 (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 연결정보

튜토리얼 사이트

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

http://hleecaster.com/twitter-api-developer/

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

jamesnet214 · 8월 1, 2021, 12:33오전

애플 (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

jamesnet214 · 8월 1, 2021, 7:09오전

깃허브 (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

Building OAuth apps - GitHub Docs

jamesnet214 · 8월 1, 2021, 7:14오전

카카오톡 (KakaoTalk)

TBD…

jamesnet214 · 8월 1, 2021, 7:14오전

네이버 (Naver)

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

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

사용범위: 무료제공, 네이버 계정 필요
(가입 후 즉시 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

_jeonghwan · 10월 14, 2022, 3:53오후

오늘 하루를 oauth 작업을 하며 헤매인 내용이 있어 james님의 슬로그에 덧붙여 봅니다.

위 git소스를 클론하여 sample project가 잘 동작하는 것을 확인 한 후 작업중인 razor pages 사이트에 nuget으로 네이버, 카카오, 구글등의 package를 설치해서 oauth로그인이 정상적으로 되는 것을 확인하였습니다.

Challenge 후 redirect된 url에서 User.Identity.IsAuthenticated 이 계속 false로 처리되어 claim을 바로 확인할 수 없는 문제가 발생하였습니다.

해서, redirect url을 웹브라우저에 직접 입력후 페이지를 로딩하면 User.Identity.IsAuthenticated이 true로 확인되는 이상한 상황으로 빠지게 되었습니다.

다른 에러는 없는 상황이라…한참을 헤맸는데…

결론적은 cookie samesitemode가 문제였습니다. 별 생각없이 cookie 설정을 하다보니 SameSiteMode를 Strict로 해서 사용하였는데 이게 문제였습니다. Lax로 하면 정상처리 됩니다.

.AddCookie(options =>
{
    options.ExpireTimeSpan = TimeSpan.FromMinutes(20);
    options.SlidingExpiration = true;
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
    options.Cookie.SameSite = SameSiteMode.Strict;   
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    options.LoginPath = "/Login/Login";
    options.LogoutPath = "/Login/Logout";
    options.AccessDeniedPath = "/Login/AccessDenied";
})

CSRF방지를 위해 다음과 같은 options이 사용됩니다. 마소문서 내용이 복잡한데 요약하면 다음과 같습니다.

브라우저에서 자바스크립트를 통해 쿠키를 조회할 수 없게합니다.
options.Cookie.HttpOnly;

크로스 사이트 쿠키전송이 불가능하게 합니다.
options.Cookie.SameSite = SameSiteMode.Strict;

https환경에서만 쿠키가 사용됩니다.
options.Cookie.SecurePolicy = CookieSecurePolicy.Always;

SameSiteMode.Lax로 변경되면 동일한 도메인을 가진 사이트에서만 사용되도록 쿠키 사용이 제한되며 일부 예외적인 상황(HTTP Get Method , a href 등)에서만 쿠키 사용이 가능합니다.

jamesnet214 · 10월 14, 2022, 4:19오후

@_jeonghwan 앗 좋은 내용 공유해 주셔서 정말 감사합니다!!

나쵸맨 · 1월 29, 2023, 1:11오후

blazor에서 지금 막 kakaotalk Oath 적용해봤습니다.
많이 해맸네요. token발행해서 사용자 정보 가져오는거 까진 했는데
사용자를 가입시킬때 카카오톡은 어떤 정보로 등록을 해야되는지요? 이메일주소는 사용자 동의가 필요하거나 없는 사용자도 있어서 안되고 id라는게 있는데 숫자 9자리인가…있던데 그건 그 유저만 가지는 유일한 키값이 되는지요? 그럼 그걸로 사용자를 등록하려고 하는데 조언 부탁드립니다.

_jeonghwan · 1월 29, 2023, 11:58오후

ClaimTypes.NameIdentifier로 넘어오는 값이 id일겁니다.

저도 인증사이트 정보와 ClaimTypes.NameIdentifier를 이용해서 oauth 회원가입처리하여 사용중입니다.