[이전 포스팅](https://www.chanstory.dev/blog/post/24)에서는 RIOT PRODUCTION API KEY를 발급 받는 과정을 포스팅 했습니다.
 
PRODUCTION API KEY를 발급 받은 이후에 match와 관련된 api에 접근할 수는 있었지만 플레이어의 전적을 공개하기 위해서는 플레이어의 동의가 있어야한다는 사실을 알게 되었습니다.
즉 플레이어가 직접 RSO를 통해 라이엇 계정으로 로그인하여 전적 공개를 동의해야만합니다.
 
이번 포스팅에서는 RSO를 통합하고 RIOT 로그인을 통해 토큰을 받아오는 방법을 다룹니다.
해당 내용은 [RSO문서](https://docs.google.com/document/d/1_8i2PvPA3edFHIh1IwfO5vs5rcl04O62Xfj0o7zCP3c/edit?pli=1)에서도 확인할 수 있지만 포스팅에서 조금 더 자세히 다룰 예정입니다.


 

## 📑 RSO 통합을 신청하자

여러분의 product가 승인되고 api key를 발급 받았다면 Riot에서 RSO 통합에 관련된 메세지를 보냈을 거에요. 그럼 RSO 통합을 진행하겠다는 메세지와 여러분의 이메일 주소를 함께 보내시면 몇일 후 메일을 받을 겁니다.
만약 관련 메세지를 받지 않았다면 먼저 여러분의 메일 주소와함께 RSO 통합 작업을 하고 싶다고 메세지를 보내세요.

 

RSO를 통합 메일을 받아서 확인해보면 신청 양식이 있습니다.
신청 양식을 작성하고 답장을 보내면 RIOT에서 확인하고 승인해줄거에요.

 

양식은 아래와 같습니다.
 
1. 연락할 이메일 주소
2. 회사/서비스 이름
3. 회사/서비스 로고 (60x60과 275x275 사이의 svg 권장)
4. 개인정보 처리방침 URL
5. 서비스 이용약관 URL
6. 로그인 후 리다이렉트하는 URI
 * HTTPS 필수, 로컬에서 사용하려면 별도의 추가 작업 필요
 * 해당 URI로 리다이렉트하며 쿼리로 데이터를 인증과 관련된 데이터를 넘겨줍니다.
7. 로그아웃 후 리다이렉트하는 URI
8. 선호하는 client id

 

저는 메일을 보낸 뒤 일주일 쯤 걸려서 답장을 받은 것 같습니다.

 
 



## 🎈 RIOT 계정으로 로그인 해보자

승인 메일을 받으셨으면 해당 메일에 client id와 client secret이 포함되어 있을 것이고 간단한 사용법에 대해서 적혀있을 거에요.
client id와 client secret은 RSO로 로그인한 이후 토큰을 받아오는데 사용합니다. (client secret은 절대 외부에 공개하면 안됩니다.)

 

그럼 개발 작업에 들어가기 전에 간편 로그인 페이지에 접속해보겠습니다.
기본적인 간편로그인 URI는 아래와 같습니다.

 
> RSO 문서를 참고하여 추가로 쿼리에 내용을 추가할 수도 있습니다.


`https://auth.riotgames.com/authorize?client_id={client id}redirect_uri={RSO 신청 시 작성한 리다이렉트 URI}&response_type=code&scope=openid+offline_access`

 

URI 접속하여 로그인하게 되면 사용자에게 권한을 요청하는 메세지가 나옵니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/b9a809af-3146-4080-2dea-fbe09d35cd00/public)

여기서 인증하기 버튼을 누르면 우리가 입력한 리다이렉트 페이지로 이동합니다.
그리고 uri의 쿼리에 code가 담겨있는 것을 확인할 수 있는데 해당 code를 서버로 보낸 뒤 토큰을 얻는 작업을 진행하면 로그인은 완료입니다.

 
 


## 🎈 로그인 후 받은 code로 token 얻기

RSO 문서 혹은 RIOT에서 제공하는 RSO 샘플에서는 request 모듈을 사용하고 토큰 발급까지 진행하지만 저는 axios를 사용하여 진행하고 토큰 발급 후 유저의 닉네임 정보까지 불러오도록 작업해보겠습니다.

 

> 모듈
```ts
import axios from "axios";
import { Request, Response, Router } from "express";
```

 

>타입
```ts
interface OauthRsponse {
 id_token: string;
 refresh_token: string;
 access_token: string;
 expires_in: number;
 token_type: string;
}

interface UserInfo {
 puuid: string;
 gameName: string;
 tagLine: string;
}
```

 

> 선언
```ts
const router = Router();

// 로그인한 유저의 정보를 캐싱할 authMap
const authMap = new Map();

const appCallbackUrl = `${process.env.VALIN2_URL}/`;

const tokenUrl = "https://auth.riotgames.com/token";

const clientID = process.env.RSO_CLIENT_ID,
 clientSecret = process.env.RSO_CLIENT_SECRET;

const axiosConfig = {
 auth: {
 username: clientID,
 password: clientSecret,
 },
 headers: {
 "Content-Type": "application/x-www-form-urlencoded",
 },
};
```
Content-Type을 'application/x-www-form-urlencoded'으로 맞추지 않으면 오류가 발생합니다.
process.env 변수들을 여러분이 필요한 내용으로 수정해주시면 됩니다.

 

> 로직
```ts
router.get("/oauth", async (req: Request, res: Response) => {
 const { code } = req.query;

 let params = new URLSearchParams();
 params.append("grant_type", "authorization_code");
 params.append("code", code as string);
 params.append("redirect_uri", appCallbackUrl);

 try {
 // 유저가 로그인하여 얻은 code로 token data를 받아온 뒤 id_token 분리
 const payload: OauthRsponse = await axios
 .post(tokenUrl, params, axiosConfig)
 .then((res) => res.data);

 const id_token = payload.id_token;
 const tokens = {
 refresh_token: payload.refresh_token,
 access_token: payload.access_token,
 expires_in: payload.expires_in,
 token_type: payload.token_type,
 };

 // access_token를 사용해 유저 정보를 불러옴
 const userInfo: UserInfo = await axios
 .get("https://asia.api.riotgames.com/riot/account/v1/accounts/me", {
 headers: {
 Authorization: `${tokens.token_type} ${tokens.access_token}`,
 },
 })
 .then((res) => res.data);

 // id_token 토큰을 key 값으로 토큰 정보와 유저 정보를 authMap에 저장 (이후에 id_token을 사용해 토큰 및 유저 데이터에 접근하기 위함)
 if (userInfo) {
 authMap.set(id_token, {
 ...userInfo,
 ...tokens,
 });
 }

 // 유저 닉네임을 표시하기 위한 userInfo와 캐싱된 유저 토큰 정보를 찾기 위한 key 값인 id_token만 클라이언트로 전달
 return res.send({
 result: true,
 authData: {
 id_token,
 userInfo: {
 gameName: userInfo.gameName,
 tagLine: userInfo.tagLine,
 },
 },
 });
 } catch (error) {
 console.timeLog(error);
 return res.status(400);
 }
});

export default router;
```

code를 이용해 토큰을 발급 받고 로그인한 유저 정보를 불러오는 로직입니다.
 
access_token은 유저 관련 api를 사용할 때 필요하고 refresh_token은 토큰의 유효시간이 만료되었을 때 token을 제발급 하기 위해 필요합니다. (만료 시간은 expires_in (초 단위)로 계산합니다.)
 
access_token과 refresh_token는 절대 클라이언트에 공개되어서는 안됩니다.
그래서 두 토큰에 접근하기 위해서 클라이언트에 id_token을 전달하여 쿠키로 가지고 있다가 필요할 때 서버로 전달한 뒤 캐싱 데이터 객체인 authMap의 키값으로 사용하여 다른 토큰을 찾아 사용하면 되겠습니다.

 

위의 로직을 직접 사용하여 code를 token으로 변환하는 과정을 성공했다면 '라이엇 홈페이지 - 계정 관리' 페이지에서 여러분의 서비스가 연동되어있는 것을 확인할 수 있습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/e61c15b4-2d76-48a8-e929-c5394320bf00/public)

[이전 포스팅](https://www.chanstory.dev/blog/post/24)에서는 RIOT PRODUCTION API KEY를 발급 받는 과정을 포스팅 했습니다.
 
PRODUCTION API KEY를 발급 받은 이후에 match와 관련된 api에 접

[VALIN2.KR #5] RIOT 계정 로그인인 RSO(Roit Sign On) 적용하기