Unity 수업내용 21.06.24. Naver로그인

NAVER Developers

네이버 개발자센터로 들어가주자

그리고 '네이버 아이디로 로그인'이 필요하기 때문에 해당 링크로 들어가주자

 

그리고 네이버 아이디 로그인 ('네아로')의 오픈 API 이용신청을 눌러주자.

 

 

휴대폰 인증을 하고 진행을 하다가 해당 페이지가 나온다면 App 이름 아래의 드롭박스에서 네아로를 선택하면 해당 체크표가 나온다. 필요한 정보들을 체크해두고 진행한다.

 

그리고 환경은 모바일 웹으로 만들어주자.

네이버는 다운로드 URL을 우리가 직접 입력할 수 있다.

그 아래의 패키지이름은 콜백으로 만들어준다.

 

이제 등록을 하면 클라ID와 시크릿 ID를 사용할 수 있다.

 

그리고 Visual Studio Code를 켜서 Naver Login을 구현할 폴더를 하나 만들고 npm init -y를 해주고, Express와  nodemon도 받아주자.

 

1. npm init -y

2. npm i express nodemon

3. app.js파일을 해당 폴더하위에 만들어서 라우터를 만들자.

 

 

그리고 cmd창에서 nodemon으로 app을 실행한다면 정상작동하는 모습을 볼 수 있다.

 

 

그리고 api/login 경로와 callback경로도 만들어준다.

 

/api/login/naver와 callback모두 정상작동한다.

 

그리고 passport를 사용하여 naverlogin을 구현할 수 있게해주는 모듈을 찾아보자

1. passport를 인스톨하고

2. passport - naver를 인스톨하자

 

passport

npm passport 링크

 

passport-naver-v2

npm passport-naver-v2링크

passport-naver는 진전이 없어 다른사람이 만들었다고 한다.

 

 

해당 passport-naver-v2의 github에 들어가서 샘플을 보자.

npm 해당 위치의 오른편을 보면 있다.

 

 

샘플의 index를 보면 우리가 필요로 하는 코드가 나와있다.

require('dotenv').config()

const passport = require('passport')
const express = require('express')
const NaverStrategy = require('../build/passport-naver.js').Strategy

const PORT = process.env.PORT || 3000
const app = express()

/**
 * passport setting
 */
passport.use(
  new NaverStrategy(
    {
      clientID: process.env.API_KEY,
      clientSecret: process.env.CLIENT_SECRET_KEY,
      callbackURL: 'http://localhost:3000/callback',
    },
    (accessToken, refreshToken, params, profile, done) => {
      // 계정 관련 구현 부분

      return done(null, profile._json)
    }
  )
)
passport.serializeUser(function (user, done) {
  done(null, user)
})
passport.deserializeUser(function (obj, done) {
  done(null, obj)
})

/**
 * express app setting
 */
app.use(passport.initialize())

app.get('/login/reprompt', passport.authenticate('naver', { authType: 'reprompt' }))
app.get('/login', passport.authenticate('naver', { state: 'sampleState' }))
app.get('/callback', passport.authenticate('naver'), (req, res) => {
  res.send('result :' + JSON.stringify({ state: req.query.state, user: req.user }))
})

/**
 * run server
 */
app.listen(PORT, () => {
  console.log(`💡 Server is running on ${PORT}`)
})

 

해당 코드에서 나는 config가 필요없어서 지웠고 passport-naver.js의 위치를 내 폴더의 위치에 맞게 변경해주었다.

또한 ClientID와 SecretID, callbackURL을 모두 내 개발자계정에 알맞은 값으로 입력해주었다.

 

const passport = require("passport");
const express = require("express");
const NaverStrategy = require("passport-naver-v2").Strategy;

const PORT = process.env.PORT || 3030;
const app = express();

/**
 * passport setting
 */
passport.use(
  new NaverStrategy(
    {
      clientID: "LAMeiLTHCLQnPGQiHSfh",
      clientSecret: "j9VceCMAud",
      callbackURL: "http://localhost/3030/api/naver/login/callback",
    },
    (accessToken, refreshToken, params, profile, done) => {
      // 계정 관련 구현 부분

      return done(null, profile._json);
    }
  )
);
passport.serializeUser(function (user, done) {
  done(null, user);
});
passport.deserializeUser(function (obj, done) {
  done(null, obj);
});

/**
 * express app setting
 */
app.use(passport.initialize());

app.get(
  "/login/reprompt",
  passport.authenticate("naver", { authType: "reprompt" })
);
app.get(
  "/api/naver/login",
  passport.authenticate("naver", { state: "sampleState" })
);
app.get(
  "/api/naver/login/callback",
  passport.authenticate("naver"),
  (req, res) => {
    res.send(
      "result :" + JSON.stringify({ state: req.query.state, user: req.user })
    );
  }
);

/**
 * run server
 */
app.listen(PORT, () => {
  console.log(`💡 Server is running on ${PORT}`);
});

그리고 실행을 해보니 Unexpected token에러가 나는것을 확인했다. 

app구동이 끝나고 나서 발생한 에러였는데 });로 메서드가 닫힌 다음에 enter이던 space bar이던 뭔가 공백값이 들어가서 해당 값 때문에 에러가 나는 것이었다.

지워주니까 정상적으로 구동됐으며 구동된 화면은 다음과 같다.

어디서 많이 보던 화면이다 ㅎ.. 

 

 

- 성공! ;D