0
Facebook 계정 키트 문서 [link]에 명시된대로 웹용 계정 키트 샘플을 만들었습니다.웹용 Facebook 계정 키트 (죄송합니다. 문제가 생겼습니다) 문제
전화 번호를 제출하고 SMS를 통해 로그인을 클릭하면 오류가 발생합니다. 오류 팝업 :
(죄송합니다. 무엇인가 잘못되었습니다.)
Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://sdk.accountkit.com/en_US/sdk.js"></script>
</head>
<body>
Enter country code (e.g. +1):
<input type="text" id="country_code" />
Enter phone number without spaces (e.g. 444555666):
<input type="text" id="phone_num"/>
<button onclick="phone_btn_onclick();">Login via SMS</button>
Enter email address
<input type="text" id="email"/>
<button onclick="email_btn_onclick();">Login via Email</button>
<script>
// initialize Account Kit with CSRF protection
AccountKit_OnInteractive = function(){
AccountKit.init(
{
appId:"288886378122244",
state:"cswwsrf",
version:"v1.0"
}
);
};
// login callback
function loginCallback(response) {
console.log(response);
if (response.status === "PARTIALLY_AUTHENTICATED") {
document.getElementById("code").value = response.code;
document.getElementById("csrf_nonce").value = response.state;
document.getElementById("my_form").submit();
}
else if (response.status === "NOT_AUTHENTICATED") {
// handle authentication failure
}
else if (response.status === "BAD_PARAMS") {
// handle bad parameters
}
}
// phone form submission handler
function phone_btn_onclick() {
var country_code = document.getElementById("country_code").value;
var ph_num = document.getElementById("phone_num").value;
AccountKit.login('PHONE',
{countryCode: country_code, phoneNumber: ph_num}, // will use default values if this is not specified
loginCallback);
}
// email form submission handler
function email_btn_onclick() {
var email_address = document.getElementById("email").value;
AccountKit.login('EMAIL', {emailAddress: email_address}, loginCallback);
}
</script>
</body>
</html>
Server.js
const fs = require('fs');
const Guid = require('guid');
const express = require('express');
const bodyParser = require("body-parser");
const Mustache = require('mustache');
const Request = require('request');
const Querystring = require('querystring');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
var csrf_guid = Guid.raw();
const api_version = 'v1.0';
const app_id = '288886378122244';
const app_secret = 'f67b17e61d3ac36350b5f325be77659f';
const me_endpoint_base_url = 'https://graph.accountkit.com/v1.0/me';
const token_exchange_base_url = 'https://graph.accountkit.com/v1.0/access_token';
function loadLogin() {
return fs.readFileSync('login.php').toString();
}
app.get('/', function(request, response){
var view = {
appId: app_id,
csrf: csrf_guid,
version: account_kit_api_version,
};
var html = Mustache.to_html(loadLogin(), view);
response.send(html);
});
function loadLoginSuccess() {
return fs.readFileSync('login_success.html').toString();
}
app.post('/sendcode', function(request, response){
console.log('code: ' + request.body.code);
// CSRF check
if (request.body.csrf_nonce === csrf_guid) {
var app_access_token = ['AA', app_id, app_secret].join('|');
var params = {
grant_type: 'authorization_code',
code: request.body.code,
access_token: app_access_token
};
// exchange tokens
var token_exchange_url = token_exchange_base_url + '?' + Querystring.stringify(params);
Request.get({url: token_exchange_url, json: true}, function(err, resp, respBody) {
var view = {
user_access_token: respBody.access_token,
expires_at: respBody.expires_at,
user_id: respBody.id,
};
// get account details at /me endpoint
var me_endpoint_url = me_endpoint_base_url + '?access_token=' + respBody.access_token;
Request.get({url: me_endpoint_url, json:true }, function(err, resp, respBody) {
// send login_success.html
if (respBody.phone) {
view.phone_num = respBody.phone.number;
} else if (respBody.email) {
view.email_addr = respBody.email.address;
}
var html = Mustache.to_html(loadLoginSuccess(), view);
response.send(html);
});
});
}
else {
// login failed
response.writeHead(200, {'Content-Type': 'text/html'});
response.end("Something went wrong here. :(");
}
});
app.listen(process.env.PORT);
Login_success.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>AccountKitJS App</title>
</head>
<body>
<div>Logged In to Account Kit:</div>
<div>User Token {{user_access_token}}</div>
<div>User Token Expires at {{expires_at}}</div>
<div>User Id {{user_id}}</div>
<div>User phone: {{phone_num}}</div>
<div>User email: {{email_addr}}</div>
</body>
내가 server.js (NPM 시작)을 시작했다. 직접 URL에서 실행 중입니다.
