구글 OAuth2 로그인 "확인되지 않은 앱 입니다. " 해결방법 !! [angular https ssl통신 설정방법 ]

 

현재 나는 앵귤러에 로그인을 올리고있다. 구글인가서버에서 인증하고 정보제공을 동의하게 되면

access_token 을 url파라미터로 받아오게되는 과정이다.

---

하지만  구글 로그인시 구글 인가서버 ( with redirect_url ,  client_id, response_type , scope) 에서 인가를 하게 되면

 

확인되지 않은 앱이라고 나올 때가 있다. 이는 HTTPS 문제이다.

 

 

 

 

---

구글API 는 HTTPS (HTTP Security) 상에서만 작동되도록 설정 되어 있는데,

우리는 보통 localhost 에서 개발연습을 하기에 HTTP 에서 테스트를 하게 되고, 여기서 확인되지 않은 앱이라고 나오는것이다.

 

이제우리는  ng serve  할때 ssl 설정해주어서 구글API 에 접속할수 있게 해주어야한다.

 

---

단도직입적으로

  ng serve --ssl --ssl-key " C:/ . . . / private.key "  --ssl-cert " C:/ . . . / cert.key"

이렇게 시작하면 된다. 

 

---

그러면  private.key와 cert.key는 어디서 구할 수 있는가?

 

  우리는 openSSL프로그램을 이용해서 두개를 만들어 내야 한다.

 

  1. 프로그램 설치,실행 

sourceforge.net/projects/openssl/files/latest/download?source=typ_redirect

>   openSSL 프로그램 다운
>   C: 바로 밑에 압축해제
>   /bin 폴더의 openssl.exe실행

 

   2. private key 만들기

    OpenSSL>  genrsa -out private.key

 

   3. public key 만들기

    OpenSSL>  rsa -in private.key -pubout -out public.key

   4. CSR  만들기

    OpenSSL>  req -new -key private.key -out private.csr

    5. CERT 만들기

    OpenSSL>  req -x509 -in private.csr -key private.key -out cert.pem -days 365

 

 

---

자 이제 OpenSSL 폴더에 가보면 파일들이 만들어진것을 볼 수 있다.

  private.key와 cert.pem 을 사용해서 ng serve해주면 된다.

---

  이제 아래와 같이 안전하지 않음으로 이동할수 있는 버튼이 생긴다.

이를 클릭하면  로그인이 진행이 된다!!

 

ng serve --ssl --ssl-key "C:\OpenSSL\bin\private.key" --ssl-cert "C:\OpenSSL\bin\cert.pem"