Facebook - kuimoani/defold GitHub Wiki

Facebook

Facebook API ๋Š” iOS, Android, HTML5 ๊ฒŒ์ž„์„ ์œ„ํ•ด ๊ทœ๊ฒฉํ™”๋œ ๋ฐฉ๋ฒ•์œผ๋กœ Facebook์˜ ๊ฒŒ์ž„ ์—ฐ๋™ ๊ธฐ๋Šฅ๊ณผ ์ƒํ˜ธ์ž‘์šฉ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค๋‹ˆ๋‹ค.

Defold Facebook API ๋Š” ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ์—์„œ ๋Œ์•„๊ฐ€๋Š” Facebook API๋ฅผ iOS, Android, HTML5 (Facebook Canvas๋ฅผ ํ†ตํ•ด์„œ)์—์„œ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•˜๊ฒŒ๋” ํ†ต์ผ๋œ ํ•จ์ˆ˜๋“ค์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฒŒ์ž„์—์„œ Facebook ์—ฐ๋™์„ ์‹œ์ž‘ํ•˜๋ ค๋ฉด Facebook ๊ณ„์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Defold 1.2.92 ์—์„œ Facebook API๊ฐ€ ์ƒˆ๋กœ์šด ๋ฐฉ๋ฒ•์œผ๋กœ ์žฌ์„ค๊ณ„ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด์ „ API๋„ ์—ฌ์ „์ด ์ž‘๋™ํ•˜๋ฏ€๋กœ ํฌ๋ฆฌํ‹ฐ์ปฌํ•œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์€ ์—†์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์˜ˆ์ „ API๋Š” ์ƒˆ๋กœ์šด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

Registering as a Facebook developer

Facebook ์—ฐ๋™ ๊ฐœ๋ฐœ์„ ํ•˜๋ ค๋ฉด Facebook developer์— ๊ฐ€์ž…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ Defold ๊ฒŒ์ž„๊ณผ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ํ•  ์ˆ˜ ์žˆ๋Š” Facebook ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • Facebook for developers๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  • Facebook ๊ณ„์ •์œผ๋กœ ๋กœ๊ทธ์ธ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ง€์นจ์— ๋”ฐ๋ผ ๊ฐœ๋ฐœ์ž ๊ณ„์ •์„ ๋“ฑ๋กํ•˜๊ณ  ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

Register as a developer

developer

Creating a Facebook app

๋‹ค์Œ ๋‹จ๊ณ„๋Š” Facebook application์„ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ตฌ์„์— My Apps ๋ฉ”๋‰ด๋ฅผ ์—ด์–ด์„œ ์ƒ์„ฑํ•œ ์•ฑ ๋ชฉ๋ก์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ Add a New App ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

Add new app

ํƒ€๊ฒŸ ํ”Œ๋žซํผ ์„ ํƒํ™”๋ฉด์ด ๋‚˜ํƒ€๋‚˜๋ฉด basic setup ๋ฅผ ํด๋ฆญํ•ด์„œ ๋งˆ๋ฒ•์‚ฌ(wizards)๋ฅผ ์Šคํ‚ตํ•ฉ๋‹ˆ๋‹ค.

๋งˆ๋ฒ•์‚ฌ๋ฅผ ํ†ตํ•ด ์ œ๊ณต๋˜๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์ •๋ณด๋Š” Defold์˜ ๊ฐœ๋ฐœ๊ณผ๋Š” ๋ฌด๊ด€ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ์ผ๋ฐ˜์ ์œผ๋กœ "Info.plist" ๋˜๋Š” "AndroidManifest.xml" ์„ ์ง์ ‘ ํŽธ์ง‘ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

Add new app platform

์•ฑ ๋Œ€์‰ฌ๋ณด๋“œ์—์„œ๋Š” ํ”Œ๋žซํผ ์„ค์ •์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€, ์‚ญ์ œ, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ์•ฑ์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๊ณ  Display Name, Namespace, Category ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ์ด ๋ชจ๋“  ๊ฐ’๋“ค์€ ์•ฑ ๋Œ€์‰ฌ๋ณด๋“œ์—์„œ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์„ ๋งˆ์น˜๋ฉด Facebook์€ ๊ณ ์œ ํ•œ ์•ฑ ์‹๋ณ„์ž๋กœ ์•ฑ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. App ID ๋Š” ํŠน์ • ์•ฑ์„ ์‹๋ณ„ํ•œ ์ดํ›„๋กœ๋Š” ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

New app id

App dashboard settings

Settings ํƒญ์„ ํด๋ฆญํ•ด์„œ ์ˆซ์ž๋กœ ๋œ App ID๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ์ด ์‹๋ณ„์ž๋Š” Defold ๊ฒŒ์ž„์˜ project settings์— ํ•„์š”ํ•œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ ์ด ์„ค์ •์€ ์—๋””ํ„ฐ์—์„œ๋Š” ์ˆจ๊ฒจ์ ธ ์žˆ์ง€๋งŒ(๊ณง ๋ณ€๊ฒฝ๋  ์˜ˆ์ •์ž„), "game.project"์— ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ํด๋ฆญํ•ด์„œ Open With โ–ธ Text Editor ๋ฉ”๋‰ด๋ฅผ ์„ ํƒํ•ด์„œ ์‹๋ณ„์ž๋ฅผ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Open project settings with

[facebook] ์„น์…˜์— App ID์— ํ•ด๋‹นํ•˜๋Š” appid=456788687846098 ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์ˆซ์ž๊ฐ€ ๋งž๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ํŒŒ์ผ์„ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.

Game project

์ด์ œ, Facebook ์•ฑ ํŽ˜์ด์ง€์˜ Settings ํƒญ์œผ๋กœ ๋Œ์•„์™€์„œ + Add Platform ๋ฅผ ํด๋ฆญํ•ด์„œ ์•ฑ์— ์ƒˆ ํ”Œ๋žซํผ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํ”Œ๋žซํผ ๋ณ„๋กœ ์ฑ„์›Œ์•ผํ•˜๋Š” ์„ค์ • ํ•ญ๋ชฉ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Select platform

iOS

iOS์˜ ๊ฒฝ์šฐ "game.project"์— ์„ค์ •ํ•œ bundle_identifier ๋ฅผ Bundle ID์— ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

iOS settings

Android

Android์˜ ๊ฒฝ์šฐ Google Play Package Name์— "game.project"์—์„œ ์„ค์ •ํ•œ package ์‹๋ณ„์ž๋ฅผ ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ธ์ฆ์„œ์˜ ํ•ด์‰ฌ๊ฐ’์„ ์ƒ์„ฑํ•ด์„œ Key Hashes ํ•„๋“œ์— ์ž…๋ ฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. openssl ์„ ์‚ฌ์šฉํ•˜์—ฌ "certificate.pem"์—์„œ ํ•ด์‰ฌ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

$ cat certificate.pem | openssl x509 -outform der | openssl sha1 -binary | openssl base64

(์„œ๋ช… ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ Android ๋งค๋‰ด์–ผ์˜ Creating certificates and keys์—์„œ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค.)

Android settings

Facebook Canvas

HTML5 ๊ฒŒ์ž„์˜ ๊ฒฝ์šฐ์—๋Š” ์ž‘์—…๊ณผ์ •์ด ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. Facebook์€ ์–ด๋”˜๊ฐ€๋กœ๋ถ€ํ„ฐ ๊ฒŒ์ž„ ์ปจํ…์ธ ๋ฅผ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ๋‘ ๊ฐ€์ง€ ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Facebook Canvas settings

  1. Facebook์˜ Simple Application Hosting ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. Yes๋ฅผ ํด๋ฆญํ•ด์„œ ํŽ˜์ด์Šค๋ถ์ด ๊ด€๋ฆฌํ•˜๋Š” ํ˜ธ์ŠคํŒ…์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. uploaded assets ๋ฅผ ์„ ํƒํ•ด์„œ hosted asset manager๋ฅผ ์—ฝ๋‹ˆ๋‹ค. Simple hosting "HTML5 Bundle"์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค: HTML5 bundle HTML5 bundle์„ .7z ๋˜๋Š” .zip ์œผ๋กœ ์••์ถ•ํ•ด์„œ Facebook์— ์—…๋กœ๋“œ ํ•ฉ๋‹ˆ๋‹ค. Push to production ๋ฅผ ํด๋ฆญํ•ด์„œ ๊ฒŒ์ž„ ์„œ๋น„์Šค๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

  2. Facebook ํ˜ธ์ŠคํŒ…์˜ ๋Œ€์•ˆ์œผ๋กœ๋Š” HTTPS ๋ฅผ ํ†ตํ•ด ๊ฒŒ์ž„์„ ์„œ๋น„์Šคํ•˜๋Š” ํŠน์ • ์„œ๋ฒ„๋กœ HTML5 bundle ์„ ์—…๋กœ๋“œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Secure Canvas URL๋ฅผ ๊ฒŒ์ž„์˜ URL๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ, Canvas Page๋กœ ์ œ๊ณต๋œ Facebook URL ์„ ํ†ตํ•˜์—ฌ ๊ฒŒ์ž„์ด ์ž‘๋™ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Testing the setup

๋‹ค์Œ์˜ ๊ธฐ๋ณธ์ ์ธ ํ…Œ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ค์ •๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์ƒˆ ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ƒˆ ์Šคํฌ๋ฆฝํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”๊ฐ€ํ•จ
  2. ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•จ
local function get_me_callback(self, id, response)
    -- response ํ…Œ์ด๋ธ”์€ ๋ชจ๋“  ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์Œ
    pprint(response)
end

local function fb_login(self, data)
    if data.status == facebook.STATE_OPEN then
        -- ๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ•˜๋ฉด HTTP graph API๋ฅผ ํ†ตํ•ด "me" ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ์–ด๋ณด์ž
        local token = facebook.access_token()
        local url = "https://graph.facebook.com/me/?access_token=" .. token
        http.request(url, "GET", get_me_callback)
    elseif data.status == facebook.STATE_CLOSED_LOGIN_FAILED then
        -- ๋กœ๊ทธ์ธ ์‹คํŒจ์‹œ ๋ญ”๊ฐ€ ์ฒ˜๋ฆฌํ•˜์ž...
    end
    if data.error then
        -- ์—๋Ÿฌ ๋ฐœ์ƒ
    else
        -- ์—๋Ÿฌ ์—†์Œ
    end
end

function init(self)
    -- ์ฝ๊ธฐ ๊ถŒํ•œ์œผ๋กœ ๋กœ๊ทธ์ธํ•˜๊ธฐ
    local permissions = { "public_profile", "email" }
    facebook.login_with_read_permissions(permissions, fb_login)
end

์ด ๊ฐ„๋‹จํ•œ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์ฝ˜์†”์ฐฝ์— ์•„๋ž˜์™€ ๊ฐ™์€ ๋‚ด์šฉ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

DEBUG:SCRIPT:
{
  status = 200,
  headers = {
    connection = keep-alive,
    date = Fri, 04 Nov 2016 13:54:33 GMT,
    etag = "0725a4f703fe6af27da183cfec0bb22637e331e0",
    access-control-allow-origin = *,
    content-length = 53,
    expires = Sat, 01 Jan 2000 00:00:00 GMT,
    content-type = text/javascript; charset=UTF-8,
    x-fb-debug = Pr1qUssb8Xa3x3r1t913hHMdefh69DSYYV5vcxeOB7O33mcfShIw+r7BoLpn147I2wzLF2CZRTpnR3/VYOtFpA==,
    facebook-api-version = v2.5,
    cache-control = private, no-cache, no-store, must-revalidate,
    pragma = no-cache,
    x-fb-trace-id = F03S5dtsdaS,
    x-fb-rev = 2664414,
  }
  response = {"name":"Max de Fold ","id":"14159265358979323"},
}

Development caveats

๊ฐœ๋ฐœ์ค‘์—๋Š” dev application์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ Facebook API๋Š” ๋ฒˆ๋“ค๋ง ๋œ "Info.plist" ํŒŒ์ผ์ด ๊ตฌ์„ฑ๋˜์–ด์•ผ ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ dev ์•ฑ์—์„œ ์•„์ง ๋™์ž‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ชจ๋“  ๋””๋ฒ„๊ทธ ๋ฒˆ๋“ค์€ dev ์•ฑ์œผ๋กœ ๋™์ž‘ํ•˜๋ฏ€๋กœ, ๋‹ค๋ฅธ ํ•ด๊ฒฐ์ฑ…์œผ๋กœ๋Š” ์ ์ ˆํ•œ Facebook ํ”„๋กœ์ ํŠธ ์„ค์ •์œผ๋กœ ๊ฒŒ์ž„์„ ๋นŒ๋“œํ•˜๊ณ , ์žฅ์น˜์— ๋„ฃ๊ณ , ์‹คํ–‰์ค‘์ธ ๊ฒŒ์ž„์— ์—ฐ๊ฒฐํ•˜๊ณ , ํ‰์ƒ์‹œ ์ฒ˜๋Ÿผ ๋ฐ์ดํ„ฐ๋ฅผ ์—๋””ํ„ฐ์—์„œ ์ŠคํŠธ๋ฆผํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.