Microsoft Azure Ondrive Api 사용하기

개요

notion api를 사용해 이미지 보관하는 사이트를 진행중..

사이트 다 만들어놓고 가장 중요한 부분이 지원되지 않았다

다음부터는 꼭 다 알아보고 시작해야겠다.. 설계의 중요함을 배웠다

어쨌든 마침 Ondrive를 사용하고 있기에 Ondrive Api를 사용해 거기에 저장해놓고 notion에는 메타데이터만 저장해서 가져다 쓰기로 결정!

사이트 접속 후 로그인까지

portal.azure.com

https://portal.azure.com/#home

azure라는 다른 서비스 인가

가상머신, 스토리지, DB등 다양한 서비스 제공하니 나중에 따로 포스팅 해봐도 괜찮을듯!

아마존 AWS같은 클라우드 플랫폼인가보다

시작하기 부터 API 호출하기까지

Create an app with Microsoft Graph - OneDrive API - OneDrive dev center

https://learn.microsoft.com/en-us/onedrive/developer/rest-api/getting-started/app-registration?view=odsp-graph-online

시작하기 부터 차근차근 따라해보자

일단 앱등록하고 토큰을 받아야 할것 같다

앱 등록하기

portal.azure.com

https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade

일단 redirect URL이 뭔지 모르고 선택사항이라고 하길래 남기고 등록 눌러보자

계정유형은 개인 마이크로소프트 계정만으로 설정했다

Access Token 발급

뭔가 로그인 후 발급되는것 같은데..


curl --location --request POST 'https://login.microsoftonline.com/common/oauth2/v2.0/token?client_id=619c1ad8-3ff8-4d5b-b15a-5a0f18c724fd&response_type=code&redirect_uri=&grant_type=authorization_code' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--header 'Cookie: fpc=AkCRFC5wXi1NmpAIQV8SbAw; x-ms-gateway-slice=estsfd; stsservicecookie=estsfd' \
--form 'client_id="7e1f198e-960b-4c18-b6d6-ac8922248e7e"' \
--form 'grant_type="authorization_code"' \
--form 'code="code"' \
--form 'redirect_uri="localhost"' \
--form 'client_secret="tII8Q~xcA5IHuVnXo3OOWBPMQpdg9phdwucKRdww"'

https://login.microsoftonline.com/common/oauth2/v2.0/token?client_id=[client_id]&response_type=code&redirect_uri=&grant_type=authorization_code

[Error]

"AADSTS90102: 'redirect_uri' value must be a valid absolute URI.\r\nTrace ID: 8c66dd33-8cd6-483d-b110-7e7e06322800\r\nCorrelation ID: 60ea3d18-f4d4-4b3b-8835-49d128851191\r\nTimestamp: 2023-05-08 06:00:58Z”

아아.. 리디렉션 url 필수인가 보다..

redirect URL 등록

여기보니까 설명 제대로 써져있네

access 토큰을 반환 받을 허용 URL인거고 ..

cors 같은거라고 이해했다

AccessToken을 얻는 방법

https://login.live.com/oauth20_authorize.srf?client_id=[client_id]&scope=[User.Read]&response_type=token&redirect_uri=[http://localhost:3000/admin]

위의 url과 같이 client_id , redirect_uri, response_type, scope 4개의 파라미터가 하나라도 없으면 error 가 난다

지정해놓은 redirect_uri 도 정확하게 일치해야함

http허용도 localhost일때만 가능하니 참고!

정상적으로 요청하면

위와 같이 로그인 창이 뜬다

로그인에 성공하면

내가 지정해놓은 redirect_uri로 #acces_token={token} 과 같이 내 uri를 파라미터와 함께 호출해준다


const {asPath} = useRouter()
    const hash  = (asPath as string).split('#')[1];
    const parseHash = new URLSearchParams(hash)
    console.log('hash',hash)
    console.log('window.localtion.hash',parseHash.get('access_token'))

access_token을 콘솔에 찍은 모습…

드디어 토큰 구함.. 설명도 너무 어렵고 가이드가 너무 없었다