[Project 02] 3. 로그인 페이지

leeeeunz·2020년 3월 22일
1

Project

목록 보기
9/12

1주차 : 초기세팅, 메인 페이지, 로그인 페이지
2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test

✔️ 로그인 페이지

바이브 앱은 네이버 로그인만 가능하기 때문에 먼저 Expo에서 네아로(네이버 아이디 로그인)가 가능한지 찾아보았다.
찾아본 결과 Expo로 네아로를 적용시티려면 Eject를 시키거나 Webview로 구현하거나 둘 중 한가지를 선택해야 했다.

  • Expo Eject란, Expo에서 지원하지 않는 기능들을 사용하기 위해 expo eject 명령어로 expo에서 native로 바꿔주는 것을 말한다.

  • Webview는 말 그대로, 웹의 화면을 앱에 띄우는 것을 말한다.

Expo Eject를 하게되면 작업시간이 훨씬 더뎌질 것 같았고, Expo로 시작한 이유가 사라지기 때문에 Webview로 구현하는 방식을 선택했다.

1. 네이버 개발자 센터 App 등록

우선 네아로 API를 사용하기 위해서는, 네이버 개발자 센터에 App등록을 가장 먼저 해야한다.
'애플리케이션 등록' 메뉴에 들어가서 사용 API는 '네아로'를 선택해주고, 로그인 오픈 API 서비스 환경은 'Mobile 웹'을 선택해준다. '서비스 URL'과 '네이버아이디로로그인 Callback URL'을 입력하고 등록하면 완료!

그 다음, 내 애플리케이션 메뉴에 들어가면 내가 생성한 App에 관련된 Client ID, Client Secret가 생겼을 것이다. 이제 이 정보를 이용하여 네이버 로그인을 구현하면 된다.

2. 개발 코드

export default class Login extends React.Component<User, object> {
  state: User = {
    token: '',
    code: '',
    user: '',
    result: '',
  };

  naverLogin = async () => {
    let redirectUrl = AuthSession.getRedirectUrl();

    const result = await AuthSession.startAsync({
      authUrl: `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${NV_APP_ID}&redirect_uri=${encodeURIComponent(
        redirectUrl
      )}&state=${STATE_STRING}`,
    });

    this.setState({ result });
  };

  render() {
    return (
      <LoginContainer>
        <Contents>로그아웃 상태입니다.</Contents>
        <SubContents>{`보관함을 사용하려면\n VIBE에 로그인해 주세요.`}</SubContents>
        <Btn onPress={this.naverLogin}>
          <BtnText>로그인</BtnText>
        </Btn>
      </LoginContainer>
    );
  }
}
profile
프론트엔드 개발을 공부중입니다 :)

0개의 댓글