feat: 引入FB登入機制&後端api

2021-01-16 18:09:25 +08:00 · 2021-01-16 18:09:25 +08:00 · 89e5519bc1
commit 89e5519bc1
parent 4b9c92d698
3 changed files with 106 additions and 0 deletions
--- a/api.py
+++ b/api.py
@ -0,0 +1,55 @@
+from flask import Flask, render_template, request
+import requests
+import json
+import sqlite3
+
+app = Flask(__name__)
+
+def facebookAuth(token):
+    url = "https://graph.facebook.com/v9.0/me?access_token={}"
+    
+    response = requests.get(url.format(token))
+    data = json.loads(response.text)
+
+    # 若 access code 通過 facebook 驗證
+    if response.status_code == 200:
+        return True, data['id'], data['name']
+    else:
+        return False, None, None
+
+@app.route('/courseTable', methods=["POST"])
+def get():
+    # 若 access code 通過 facebook 驗證
+    status, uid, name = facebookAuth(request.values['token'])
+    
+    if status:        
+        # 由資料庫提取資料
+        with sqlite3.connect('data.db') as conn:
+            sql = "SELECT `json` FROM `courseTables` WHERE `uid`=?"
+
+            data = conn.execute(sql, [uid]).fetchone()
+            # 已經存在使用者，直接回傳 課表json
+            if data:
+                ansJSON = data[0]
+                return json.dumps({
+                    "status": "ok",
+                    "data": ansJSON
+                })
+
+            # 使用者第一次使用，回傳並寫入空json
+            else:
+                sql = "INSERT INTO `courseTables` VALUES(NULL, ?, ?, ?)"
+                conn.execute(sql, [uid, '[]', name])
+                conn.commit()
+                return json.dumps({
+                    "status": "ok",
+                    "data": "[]"
+                })
+        
+    # access code 可能是偽造的
+    else:
+        return '{"status": "error access code"}', 403
+
+if __name__ == '__main__':
+    app.debug = True
+    app.run(host='0.0.0.0')
--- a/data.db
+++ b/data.db
--- a/index.html
+++ b/index.html
@ -17,6 +17,51 @@
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <body id="page-top">
+
+        
+        <!-- Facebook SDK -->
+        <div id="fb-root"></div>
+        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v9.0&appId=1015634862261309&autoLogAppEvents=1" nonce="MTBQv5ev"></script>
+
+        <script>
+            window.fbAsyncInit = function() {
+                FB.init({
+                    appId      : '',
+                    cookie     : true,
+                    xfbml      : true,
+                    version    : 'v9.0'
+                });
+                    
+                FB.AppEvents.logPageView();
+            };
+          
+            (function(d, s, id){
+               var js, fjs = d.getElementsByTagName(s)[0];
+               if (d.getElementById(id)) {return;}
+               js = d.createElement(s); js.id = id;
+               js.src = "https://connect.facebook.net/en_US/sdk.js";
+               fjs.parentNode.insertBefore(js, fjs);
+            }(document, 'script', 'facebook-jssdk'));
+
+
+            function checkLoginState() {
+                console.log("check")
+                FB.getLoginStatus(function(response) {
+                    statusChangeCallback(response);
+                });
+            }
+
+            function statusChangeCallback(response){
+                console.log(response)
+                if(response.status == "connected"){
+                    
+                }
+            }
+        </script>
+
+
+
+
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
            <div class="container">
@ -28,6 +73,12 @@
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
+                        <li class="nav-item mx-0 mx-lg-1">
+                            <div class="fb-login-button" data-width="" data-size="small" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="true"></div>
+                        </li>
+                        <li class="nav-item mx-0 mx-lg-1">
+                            <button onclick="checkLoginState()"></button>
+                        </li>
                    </ul>
                </div>
            </div>