react,JS 텔레그램 oauth 로그인 구현

이명진·2023년 12월 21일

React js nextjs oAuth 웹텔레그램 텔레그램 텔레그램Oauth 텔레그램로그인

모르면 참고해보자! Case Study

목록 보기

43/57

나중에 도움이 될수 있도록 텔레그램으로 oAuth로그인 하는방법을 작업하면서 정리해보았다.

작업 시작

botfather 로 새로운 봇을 만든다

텔레그램 앱에서 /newbot을 이용하면 봇을 만들수 있다

/newdomain 을 하면
도메인 가이드를 주는데 가이드 내부에 widget configuration을 입력할수 있는 란이 있다.
잘 만들어서 테스트해보자

아래 생성된 코드를 사용하는 방법도 있는것 같은데

위에는 가이드 이고 바로 채팅으로 주소를 등록하는 방법을 활용해서 위의 방법은 사용하지 않았다.

수정

(~~실은 사용해봤지만 봇 파더로 주소 도메인을 등록하고 위의 코드를 삭제해보니 잘되길래 안써도 무방한 코드인것 같다~~ )

위에는 무방한 코드라고 원래 적었지만 필요해서 embed code 부분을 script 형식으로 쓰게 되었다. 이유는 이렇다.
텔레그램에서 Auth를 하고 돌아오면 hash값으로 처리된 토큰 값을 준다. 처음 테스트 해봤을때 유저 id값이랑 성, 이름 등등 값을 파라미터 값으로 던져줬는데 이 코드를 삭제하고 난뒤부터 hash값으로 만 나와서 좀 둘러둘러 확인해보니 이 코드 때문인것 같다.
이코드를 넣으니 지금은 id 값이랑 나머지 값들이 잘 나온다.

필수 코드 였다.. 다시 수정한다.

로컬로 주소를 등록해보려고 했지만 등록이 안되서 배포후에 주소를 등록하니 잘된다.

주소를 입력할때 사용 하는 방법은 아래와 같다

 const goTelegramOAuth = () => {
    const botId = process.env.NEXT_PUBLIC_TELEGRAM_OAUTH_TOKEN;
    const originUrl = process.env.NEXT_PUBLIC_TELEGRAM_OAUTH_RETURN_URL;
    const returnUrl = window.location.origin;
    const telegramUrl = `https://oauth.telegram.org/auth?bot_id=${botId}&origin=${originUrl}&return_to=${returnUrl}`;
    window.location.href = telegramUrl;
  };

botid 는 bot을 생성할때 받은 토큰 값이다. 토큰을 전체 사용하지 않고 앞의 숫자만 사용해도 된다. 모두 사용하면 탈취당할 우려가 있으니 주의하자

originUrl 은 botfather에게 newDomain 등록한 값을 전달해준다.
returnUrl 은 현재 origin 주소를 사용해서 리다이렉트 할때 다시 그 페이지로 돌아올수 있게 함수를 작성했다.

이렇게 하면 리턴으로 돌아 왔을때 결과 값을 주소로 전달해주는데

response 값은 아래와 같다