peoplefund-tech / react-naver-login Goto Github PK

로그인 버튼을 page1 페이지에서 사용해야 하고, page2 페이지에서도 사용해야 하는데, 문제가 생깁니다.
만약 page1 페이지에서 SuccessCallback 은 func1 이면은 page2 페이지에서 SuccessCallback 은 func2 정했습니다.
근데 만약에 page1 페이지로 만약에 들어거가고 그 다음에 page2 페이지로 이동한 다음에 네이버로그인 하면은 SuccessCallback은
func2 아니라 func1로 실행하는거에요. 확인해보니까 naverLogin.init() 함수가 한번만 실행됐고 그 다음에는 신행하지 않습니다.
이 문제를 어떻게 수정할수 있나요?

제가 코드를 잘못짠 것일수도 있지만, 현재는 동작하지 않는것 같습니다.

react router를 통해
"/" => Home
"/login" => 네이버 로그인

이런식으로 하고 "/"을 사이트 주소, "/login"을 콜백 Url로 했습니다.

callbackUrl은 딱히 하는게 없게 설정했더니 onSuccessCallback이 자동으로 동작하지는 않네요.

대신 callbackUrl에 해당되는 페이지에서 능동적으로 window.opener.naver.successCallback() 을 부르는것으로는 잘 동작하네요.

원래 이런 의도로 사용하는 것이 맞는것인가요?

아무튼 passport가 secretKey까지 요구하는 것이 마음에 안들었는데 덕분에 네이버 로그인을 쉽고 안전하게 구현할 수 있었습니다. 정말 감사드립니다!!

callbackurl 을 127.0.0.1:3000 이 아니라 localhost:3000 으로 걸어줘도 문제 없이 작동하는데, readme.md 한번 확인 부탁드립니다

혹시 이 부분에 대한 해결방법을 확인해주실 수 있을까요?

naver sdk 를 script로 로드 후에 setInterval로 체킹하도록 되어 있는 로직을 script가 onload이벤트에서 처리하도록 개선

액세스 토큰은 지원안하나요 ㅠㅠ

한 화면에서 2개의 react-naver-login 을 사용하는 경우,
onSuccess 에 정의되어있는 이벤트가 다르다고 하더라도, 먼저 불러진 클래스의 이벤트로만 실행이 됩니다.

import NaverLogin from "react-naver-login";
import NaverSignUp from "react-naver-login";
...
...
            <NaverSignUp
              clientId="clientID"
              callbackUrl="http://localhost:3000"
              onSuccess={(result) => {
                signUpByNaver(result.id,result.email,result.name,"naver");
              }}
              onFailure={() => {
                alert("하이");
                console.error();
              }}
              render={(props) => (
                <NaverBtn onClick={props.onClick}>
                  네이버 아이디로 회원가입
                </NaverBtn>
              )}
            />

          <NaverLogin
              clientId="clientID"
              callbackUrl="http://localhost:3000"
              onSuccess={(result) => {
                console.log(result);
              }}
              onFailure={() => {
                console.error();
              }}
              render={(props) => (
                <NaverBtn onClick={props.onClick}>
                  네이버 아이디로 로그인
                </NaverBtn>
              )}
            />

라고 한다면, 위의 NaverSignUp의 onSuccess만 호출됩니다.

if (!('browser' in process)) 구문으로 인해 정상적으로 실행이 되지 않았습니다.
제 CRA 앱의 process를 찍어보니 {title: "browser", env: {…}, argv: Array(0), version: "", ...} 가 나왔고 browser 키가 없어 return 되어 프로세스가 종료됩니다. not 연산자 ! 을 제거하면 정상적으로 동작합니다만 제 앱의 brower 키가 없는 정확한 이유를 몰라 이슈 남깁니다.

• peerDependencies를 좀 더 낮출 수 있지 않을까?
• react, react-dom 은 devDepencies 로 가야 하지 않을까?
• popUp창에서 window.close를 호출 할 때 setInterval을 종료 해야 하지 않을까?
• render는 필수 prop 인데 왜 존재를 체킹 할까?

관련 PR을 참고 부탁드립니다.
#44