소셜로그인 수업내용 21.07.08. 카카오로그인

https://developers.kakao.com/docs/latest/ko/reference/design-guide

Kakao Developers

카카오 디자인가이드에 가면 카카오 로그인버튼 리소스를 다운받을 수 있다.

하나 받아주자.

 

그리고 유니티 프로젝트를 하나 새로 만들어서 로그인버튼까지만 구현해주자.

 

• 카카오 개발자페이지 - 내 애플리케이션으로 들어가자.

• 애플리케이션을 하나 추가해주자.

• 만든 애플리케이션으로 들어오면 해당 화면이 나온다.

• Web플랫폼을 등록해주고 콜백URL을 만들어주자.

 

• 해당 URL을 만들었으면 동의항목을 구성하자.

 이제 JS로 웹서버를 구축하러 가보자.

---

포스트맨으로 하면 화면이 제대로 안나온다. 그러니 로컬 웹으로 하자.

const express = require("express");
const app = express();
const passport = require("passport");
const KakaoStrategy = require("passport-kakao").Strategy;

let user = {};

passport.use(
  new KakaoStrategy(
    {
      clientID: "your clientID",
      clientSecret: "your secretID", // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것
      callbackURL: "your callback URL",
    },
    (accessToken, refreshToken, profile, done) => {
      // 사용자의 정보는 profile에 들어있다.
      let raw = JSON.parse(profile["_raw"]);

      user.id = profile.id;
      user.nickname = raw.kakao_account.profile.nickname;
      user.profile_image_url = raw.kakao_account.profile.profile_image_url;

      done(null, user);
    }
  )
);

app.get("/auth/kakao", passport.authenticate("kakao", null), (req, res) => {
  console.log("failed");
});

app.get("/auth/kakao/callback", (req, res) => {
  passport.authenticate("kakao", (err, user) => {
    let json = JSON.stringify(user);
    res.send(json);
  })(req, res);
});

app.get("/", (req, res) => {
  res.send("<h1>hello express!!</h1>");
});

app.listen(8002, () => {
  console.log("server is running at 'port number' port.");
});

• 위의 코드를 작성하고 웹페이지에서 url/auth/kakao를 하면 아이디, 닉네임, 썸네일 url이 포함되 JSON데이터가 출력될것이다.
• 이제 해당 코드를 cafe24(나는 cafe24를 구독해뒀기 때문에)와 연동을 해보자. 
• 카페24에서 해당 로그인과 연동할 앱을 만들거나 선택하자.
  • 앱을 새로 만들었다면 퍼블리키를 새로운 앱에 할당해주어야 한다.
• 그리고 그 앱과 Node서버를 Git을 통해 연결해주어야한다.

https://github.com/myId/KakaoLogin

• 만약 Github에 아이디가 존재한다면 github로 접속하자.

• 접속한 뒤에 화면 왼쪽에는 위 사진과 같은 탭이 있는데, Create repository를 눌러주자.

• 그러면 위 사진과 같이 여러 항목들이 뜨는데, Owner와 Repositoryname만 기입한다면 괜찮다.
• 그리고 Repository를 만들었으면 githubId_repositoryname형식으로 폴더가 하나 들어온다.
• 해당 폴더 안에서 Git bash를 실행할 것이기 때문에 해당 Node서버 내용물들을 긁어온다.
• 그리고 git clone "카페24에 나오는 저장소 이름"을 해주자. (앞에 git은 안붙여도 된다.)
• 해당 저장소를 복사해준 뒤에 git 작업을 시작한다.
• git init을 하자. 그러면 아래사진과 같은 .git폴더가 생성될 것이다.(숨김상태임)

• 

• 이어서 "git add ."을 하자. 주의할 점은 add다음에 스페이스바를 한 번 눌러주고 .을 해야한다. 모든 것을 다 ADD하겠다는 메시지라고 한다. 
• 이어서 git commit -m "원하는 이름"을 해준다. 해당 이름으로 commit하는 것이다.
• 다음으로는 git remote origin "자신이 올릴 Repository URL"을 해주고
• 마지막으로 git push origin master를 해주자. 이렇게 하면 깃과 연동이 되면서 Git Bash에 무수한 메시지들이 출력될것이다.
• *주의 이 때 Cafe24는 실행할 스크립트의 이름이 web.js여야 한다. 주의하자.
• 이후로는 새로운 내용을 갱신할 때마다 git add . => git commit -m "이름" => git push 를 해주면 자연스레 갱신되면서 갱신된 파일들의 이름이 나온다.

이런식으로 나온다.

• 그리고 마지막으로 Unity와 Node서버를 연동시켜보자.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Networking;
using Newtonsoft.Json;

public class res_kakao_user
{
    public int id;
    public string nickname;
    public string profile_image_url;
}
public class App : MonoBehaviour
{
    public Button btnLogin;
    public UniWebView webView;
    public Text txtUserId;
    public Text txtNickName;
    public Image imgThumb;


    void Start()
    {
        Screen.SetResolution(1080, 1920, true);
        this.btnLogin.onClick.AddListener(() =>
        {
            webView.Frame = new Rect(0, 0, Screen.width, Screen.height);
            webView.OnMessageReceived += WebView_OnMessageFinished;
            webView.Load("http://sociallogin.cafe24app.com/auth/kakao");            
            webView.Show();
        });
    }

    private void WebView_OnMessageFinished(UniWebView uniWebview, UniWebViewMessage message)
    {
        Debug.Log(message.RawMessage);
        Destroy(webView.gameObject);

        var user = JsonConvert.DeserializeObject<res_kakao_user>(message.RawMessage);
        this.txtUserId.text = user.id.ToString();
        this.txtNickName.text = user.nickname;

        StartCoroutine(this.WaitForLoadThumb(user.profile_image_url, (texture) =>
        {
            this.imgThumb.sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector3.zero);
        }));
    }

    IEnumerator WaitForLoadThumb(string url, System.Action<Texture2D> callback)
    {
        UnityWebRequest www = UnityWebRequestTexture.GetTexture(url);
        yield return www.SendWebRequest();
        Texture myTexture = DownloadHandlerTexture.GetContent(www);
        callback((Texture2D)myTexture);
    }
}

• 유니티 네트워킹 코드이다.
• using UnityEngine.Networking을 선언하면 사용할 수 있다.
• 사진을 불러오는데에 사용했는데, 다른 데이터를 받아올때도 가능할 것 같다.
• 핵심은 'UnityWebRequest'를 사용한다는 것이다.
• 이제 빌드를 하자.

빌드하고 APK를 실행하면 해당 로그인창이 나오며, 로그인을 하면 나의 정보들이 ADB에 뜨는것을 확인할 수 있었다.

다만, 나는 JSON을 임포트시키는 단계서부터 오류가났기때문에 데이터를 제대로 불러오지 못했다.

해당 JSON만 제대로 작동하면 UI에 모든 정보가 출력되는 것을 다른 사람들의 사례를 통해 확인했다.

 

 

++ 유니티에서 나는 JSON에러를 해결한 뒤에 정상적으로 데이터를 불러옴을 확인했다. => 결과확인