OAuth
-
[Next.js] supabase auth를 통해 next 프로젝트에 oauth 접목 시키기 (feat. Multiple GoTrueClient instances detected in the same browser context 에러)FrontEnd/Next.js 2024. 10. 4. 13:36
우선 일반적으로 oauth를 구현하는 로직은 아래와 같다.1. 유저가 로그인 버튼을 클릭2. 인증을 처리해줄 sns 로그인 페이지로 이동3. 로그인 성공 시 해당 인가 서버에서는 code를 리다이렉트 url에 searchParams로 담아서 보내줌4. 리다이렉트 url에서는 받아온 code를 통해 인가 서버에게 액세스 토큰을 받아옴.5. 받아온 액세스 토큰을 통해 인가서버로부터 유저의 정보를 받아 올 수 있음supabase auth 동작은 위의 로직에서 3,4,5 를 해결해준다. 따라서 인가 서버에 등록 될 리다이렉트 url은 supabase가 제공해주는 콜백 url을 등록해줄 필요가 있다.(다음으로 펼쳐질 내용들은 kakao Oauth를 기준으로 작성 되었고, next.js를 위한 supabase 초기..
-
Form에서 두개 이상의 버튼을 다루기 (feat. server action )FrontEnd/Next.js 2024. 6. 14. 20:03
Form 안에 두개 이상의 버튼이 있을 경우 어떤 버튼을 클릭했는지에 따라 행하는 액션이 다를 수 있다.이 때 button의 name와 value 속성을 이용하면 form의 action에서 버튼의 주체를 파악할 수 있다.form action에서 넘겨주는 파라미터는 FormData로써 폼 안에 버튼을 클릭하면 해당하는 버튼의 name과 value 정보가 포함되어져 있다.(이 때 form 안에 input 필드가 있다면 input들의 name과 value들도 출력 됨.)import { signIn } from '@/auth';function SignIn() { const handleAction = async (data: FormData) => { 'use server'; cons..
-
인가 서버에서 token 받아오기 (OAuth) feat. NextJsFrontEnd/Next.js 2024. 6. 10. 20:18
next-auth를 사용하면 provider를 통해 oauth 구현이 쉽겠지만 oauth에 대해 알고 있는 로직을 직접 구현해보고 싶어졌음https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 로그인 문서에 따르면 oauth의 로직은 아래 이미지와 같다메인 페이지(Home)에 있는 카카오 로그인 버튼을 누르면 아래의 함수가 실행된다.const HomePage = () => { const handleKakaoLogin = () => { ..
-
Oath 2.0 흐름에 대해CS/Web 2024. 4. 4. 15:36
단어 정리 Resource Owner :리소스 소유자(=user)를 말합니다. 리소스란 외부 소셜 서비스(API == 개인 정보) Authorization Server : Resource Owner를 인증하고, 우리가 개발한 웹 서비스에게 Access Token을 발급해주는 서버 즉 외부 플랫폼 리소스에 접근할 수 있는지 인증을 하는 서버를 의미 Resource Server : 구글,페이스북, 카카오와 같이 보호되는 리소스를 가지는 서버 Client : 유저가 로그인 할려는 웹 사이트. Resource Owner 를 대신해 Authorization Server & Resource Server 에 접근하는 주체입니다. client_id : client 측에서 개발 당시에 oauth 구현을 위해 리소스 서버..
-
[Web] JWT와 OAuth에 대한건 여기로!CS/Web 2023. 2. 1. 19:43
https://developers.worksmobile.com/jp/reference/authorization-sa?lang=ja Service Account認証(JWT) - Using APIs - LINE WORKS Developers Document Service Account認証 (JWT) Service Account認証とは、アプリ専用の仮想管理者アカウントを使用して認証を行い、Access Tokenを発行してAPIを利用する方法です。 Service Account認証では、Json Web Token (以降、J developers.worksmobile.com line 문서 https://velog.io/@yhlee9753/JWT-accessToken-%EA%B3%BC-refreshToken-%EC%9D%84-%..
-
[Web] OAuth 리다이렉션 URI란?CS/Web 2023. 1. 26. 14:48
OAuth를 위해 각각의 Provider 사이트에서 client id와 password를 발급받기 위한 절차를 밟다보면 나오는 승인된 리다이렉션 URI 라는 생소한 용어가 나온다. 이것을 알기 위해서는 OAuth(2.0)의 인증 과정을 먼저 알아야한다. OAuth(2.0) 인증 과정 7번 과정이 끝나면 (내 서버)는 (구글 서버의 사용자 정보)에 접근하기 위한 access token을 갖게 된다. 이 상태에서 DefaultOAuth2UserService 의 OAuth2User loadUser(OAuth2UserRequest OAuth2UserRequest) 메서드가 실행된다. 승인된 리다이렉션 URI란? 첫번째 그림에서의 3번 과정에서 Browser가 GOOGLE서버로 Request 요청을 보낼 때 리다..
-
[Next.js] OAuth(2.0)를 통한 로그인 인증FrontEnd/Next.js 2023. 1. 10. 13:57
1. OAuth란? Open standard for Authorization, Open Authorization 권한 부여를 위한 공개된 인증 프로토콜 ( 접근 권한을 위임하는 개방형 표준 프로토콜 ) eg) SNS , Google, Github, Apple, kakao, Naver 등등 2. OAuth 의 구성 요소 자원 소유자 (Resource Owner) 접근 권한과 엑세스 권한에 대해서는 아래 작동 과정 그림을 보며 접목해보면 쉽게 이해 가능 eg) 깃헙 계정으로 로그인 할려는 사람 클라이언트 (Client) eg) Velog 등 OAuth 로그인을 지원하는 애플리케이션 인가 서버 (Authorization Server) 자원 소유자를 인증하는 과정을 통해 권한에 대한 유효성을 검증 모든 검증 종..