Coding History/project 33

Firebase API로 구글 로그인 처리 준비 준비

앞의 포스팅에서는 내부적인 로그인을 구현한거였고, 유저의 이메일로 로그인이후, userId랜덤 생성.(내가 실수로 기재는 안했는데 이부분도 잘 된다.)이런 방식이였고, 나머지 두개의 로그인이 필요하다. Firebase API를 이용해서 구글 로그인과, Spotify API를 이용한 로그인을 구현할 것이다. 그래서 오늘 해볼 것은 바로 전자인 Firebase를 사용해서 구글 로그인을 구현해볼 것이다. 방법은 일단 내가 해보고 마지막 문단에서 순서대로 정리해서 올려보겠다. 나도 처음 해보는거야..우선은 firebase에서 Authentication텝을 찾아 들어가보자.오 들어가보니까 구글 뿐 아니라 다른 것들도 다양하게 있다.만약 다른게 필요하다면 여기서 뽑아써도 좋을듯?? 물론 난 구글만 필요하니까 구글만..

로그인 기능 구현

우선 무엇부터해야될까 생각하던 찰나에 파일을 업로드 할 수 있으니 로그인 기능을 구현해야겠단 생각이 들었다.그래서 기존에 article 을 만들 때 쓰던 것들을 긁어오는 중이고, 다 긁어오고 오류 없이 할 수 있게 되면 google과 spotify API를 적용시켜 로그인까지 해보려고 한다.splice를 참고하고 있기 때문에 그 방식을 따라갈까 싶은데 이메일 자체를 로그인 아이디로 만들고 유저 아이디와 유저 네임, 이름을 구별하는 방식을 그대로 따라볼까 생각중이긴하다.위의 방식을 따르고 싶기 때문에 조금 가공해서 로그인 백엔드를 구성했다.일단 테이블은,CREATE TABLE `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, ..

Spring Wav 파일 업로드 후 나의 생각. (firebase를 사용해서 파일 업다운로드)

생각의 흐름뭐 파일 업로드 까지는 어떻게 했는데 문제점이 보인다.난 서버를 껐다가 켜도 파일이 유지되었으면 좋겠는데 파일 유지? 안된다.그래서 이걸 어떻게 해야지 유지가 될까 찾아봄.외부 스토리지를 사용하라는 것을 발견.무료 외부 스토리지를 찾는 와중 구글에서 제공하는 firebase 알아냄.애초에 구글 로그인까지 넣을까 고민할 때 이미 한번 가입해서 프로젝트생성까지는 완료해봄.그래서 여기 스토리지 기능을 프로젝트에 끌어와보자 까지 도달.그래서 firebse를 통해 유저의 업로드 다운로드 파일을 관리하게끔 세팅을 한번 해보고 테스트로 구현까지 마쳐보려고 한다.일단은 firebse에 스토리지를 생성해주고 JSON파일까지 받아주고, 해당 JSON파일을 프로젝트에 넣어줬다.프로젝트의 리소스 디렉토리에 넣어야된..

Spring wav 파일 업로드 및 재생

생각의 흐름splice 사이트를 보면 음향의 파형이 사운드에 맞게 그려져 있다. 그래서 내 생각엔 파일을 업로드 할 때 한번 재생시켜보고, 해당 파형을 분석 후에 이미지파일로 저장하는 것 같다는 생각을 했고(물론 추측일 뿐이다.), 소리 파일을 파형으로 전환하는 것을 한번 해보고 싶었다.근데 파일을 어떻게 해도 재생이 안돼서 일단 업로드와 재생 문제부터 한번 해결해보자는 결론에 도달.미리 프로젝트 세팅을 하고 화면띄우는 것 까지 해둬서 파일 업로드 및 재생에 필요한 컨트롤러 클래스와 테스트용 JSP를 만들어줬다. (사실 인텔리제이에서 작업하고 싶어서 꽤나 애를 먹었는데 이 과정을 포스팅하겠다는 생각을 못해서 기록이 없다 ㅠㅠ)package com.example.blackbirdlofi.controller..

Figma 작업 단계

우선 좋은 플러그인이 있어서 필자가 래퍼런스할 사이트인 Splice를 좀 긁어와서 수정 작업을 하고 있다.작업 중, 커다란 계획을 세분화해서 생각하게 되는 계기가 생겼는데화면을 구성하는 것들을 계속 만지다보니 어떤걸 추가하면 좋을지 생각이 이것저것든다.여기 매뉴바를 참고해서 보면 sounds 탭을 샘플을 듣고 다운받을 수 있는 페이지로 가면 좋을 것 같고, Create는 판매권한자나, 판매권한을 얻기 원하는 사용자가 샘플을 올리게끔 하는 업로드 즉 우리가 여태 했던 'write'의 개념과 같은 곳으로, Community 탭은 접속하면 Discord로 보내서 서로 정보를 나눌 수 있는 탭으로, Blog는 다양한 아티스트들의 글을 긁어와서 볼 수 있는 곳으로 Pricing은 재화 충전을 위한 탭으로 나눈다...

스포티파이 for Developers 튜토리얼 번역 ( 5 )

토큰 새로 고침리프레시 토큰은 클라이언트 애플리케이션이 사용자가 애플리케이션을 재승인할 필요 없이 새로운 액세스 토큰을 얻을 수 있도록 하는 보안 자격 증명입니다.액세스 토큰은 의도적으로 제한된 수명을 가지도록 설정되며(1시간), 이 시간이 끝나면, 인증 토큰 요청 응답 중에 획득한 원래의 리프레시 토큰을 제공하여 새로운 토큰을 얻을 수 있습니다:{ "access_token": "NgCXRK...MzYjw", "token_type": "Bearer", "scope": "user-read-private user-read-email", "expires_in": 3600, "refresh_token": "NgAagA...Um_SHo"}요청액세스 토큰을 새로 고치려면, 다음 매개변수를 포함한 ..

스포티파이 for Developers 튜토리얼 번역 ( 4 )

암시적 승인 플로우!!!암시적 승인 플로우에는 몇 가지 중요한 보안 취약점이 있으므로, 이 플로우 사용을 강력히 권장하지 않습니다. 클라이언트 시크릿을 안전하게 저장할 수 없는 경우에는 PKCE와 함께 사용되는 인증 코드 플로우를 대신 사용하세요.!!!암시적 승인 플로우는 클라이언트 측에서 수행되며, 비밀 키를 포함하지 않습니다. 따라서 서버 측 코드가 필요하지 않습니다. 발급된 액세스 토큰은 단기간 동안만 유효하며, 만료 시 갱신할 수 있는 리프레시 토큰이 제공되지 않습니다.다음 다이어그램은 암시적 승인 플로우가 어떻게 작동하는지 보여줍니다:전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.소스 코드GitHub의 web-api-examples 저장소..

스포티파이 for Developers 튜토리얼 번역 ( 3 )

클라이언트 자격 증명 플로우클라이언트 자격 증명 플로우는 서버 간 인증에 사용됩니다. 이 플로우는 사용자 정보에 접근하지 않기 때문에, 오직 사용자 정보에 접근하지 않는 엔드포인트만 접근할 수 있습니다.다음 다이어그램은 클라이언트 자격 증명 플로우가 어떻게 작동하는지 보여줍니다:클라이언트 자격 증명 플로우전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.소스 코드GitHub의 web-api-examples 저장소에서 클라이언트 자격 증명 플로우를 구현한 예제 앱을 찾을 수 있습니다.권한 요청첫 번째 단계는 Spotify OAuth 2.0 서비스의 /api/token 엔드포인트에 다음 매개변수를 application/x-www-form-urlencode..

스포티파이 for Developers 튜토리얼 번역 ( 2 )

PKCE를 사용한 인증 코드 플로우PKCE를 사용한 인증 코드 플로우는 모바일 앱, 단일 페이지 웹 앱 또는 클라이언트 시크릿을 안전하게 저장할 수 없는 다른 유형의 애플리케이션에서 권장되는 인증 플로우입니다.PKCE 확장의 구현은 다음 단계로 구성됩니다:코드 검증기를 사용하여 코드 챌린지를 생성합니다.사용자로부터 권한을 요청하고 인증 코드를 가져옵니다.인증 코드를 사용하여 액세스 토큰을 요청합니다.마지막으로, 액세스 토큰을 사용하여 API 호출을 수행합니다.전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.예시GitHub의 web-api-examples 저장소에서 PKCE 확장이 포함된 인증 코드 플로우를 구현한 예제 앱을 찾을 수 있습니다.코드 검..

스포티파이 for Developers 튜토리얼 번역 ( 1 )

인증 코드 플로우인증 코드 플로우는 사용자가 한 번만 권한을 부여하는 장기 실행 애플리케이션(예: 웹 및 모바일 앱)에 적합합니다.모바일 앱 또는 클라이언트 시크릿을 안전하게 저장할 수 없는 애플리케이션에서 인증 코드 플로우를 사용하는 경우, PKCE 확장을 사용해야 합니다. 올바르게 구현하는 방법을 배우려면 계속 읽어보세요.다음 다이어그램은 인증 코드 플로우가 어떻게 작동하는지 보여줍니다:인증 코드 플로우전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.예시GitHub의 web-api-examples 저장소에서 인증 코드 플로우를 구현한 예제 앱을 찾을 수 있습니다.사용자 권한 요청첫 번째 단계는 사용자로부터 권한을 요청하여 우리의 앱이 사용자를 대..