원본 님이 개발하신 모듈을 수정하였습니다.

수정 내용

원본 모듈에서 firstchild 관련 undefined error가 발생하여 if(!process.browser) 구문을 if(typeof window===undefined) 로 수정하였습니다.

React-Login-By-Naver

A Naver oAuth Log-in Component for React

Install

npm install react-login-by-naver

How to use

copy your application's client ID and Callback URL.

If you have not yet registered your application, you must go to A and register your application.

testing on local environment, use not http://localhost:3000 but http://127.0.0.1:3000

import React from 'react';
import ReactDOM from 'react-dom';
import NaverLogin from 'react-login-by-naver';

ReactDOM.render(
  <NaverLogin 
    clientId="ClientIdFromNaverDeveloperCenter"
    callbackUrl="http://127.0.0.1:3000/login(callback url U set in naver developer center"
    render={(props) => <div onClick={props.onClick}>Naver Login</div>}
    onSuccess={(naverUser) => console.log(naverUser)}
    onFailure={() => console.error(result)}
  />,
  document.getElementById('root')
);

onSuccess / onFailure callback

if response is success, it will call the onSuccess with naver user object. or not, it will call the onFailure and return nothing.

You can also access the returned values via the following properties on the returned object.

Required

| property name | value | definition | sample | |:-------------:|:--------:|:------------------------------------:|:---------------:| | email | string | Naver user email | "[email protected]" | | id | string | Naver User ID | "371972918" | | name | string | user name | "홍길동" | | profile_image | string | Naver profile image |"http://img.na.."|

Optional

| property name | value | definition | sample | |:-------------:|:--------------------:|:------------------------------------:|:---------------:| | age | string / undefined | User Age | "20-29" | | birthday | string / undefined | User Birthday | "05-14" | | gender | string / undefined | User Gender | "M" | | nickname | string / undefined | User Nickname | "tmmoond8" |

Run on your machine

Prerequistes

• Node.js v8^
• npm

Installation

1. Clone the project

$ git clone https://github.com/moonseoklee/react-naver-login.git

2. Install packages from npm

$ cd react-naver-login 
$ npm i

3. Build packages

$ npm run build
# then, create dist directory that contains modules

4. Demo run

$ cd demo
$ npm i
$ npm run start
$ open http://127.0.0.1:3000, not http://localhost:3000