Embed data from google drive to website + LOGIN

bysemicon -
0


การฝังโฟลเดอร์ Google ไดรฟ์

***URL***
  • URL List View: "https://drive.google.com/embeddedfolderview?id=YOUR FOLDER ID#list"
    <iframe src="https://drive.google.com/embeddedfolderview?id=YOUR FOLDER ID#list" width="100%" height="500" frameborder="0"></iframe>
  • URL Grid View: "https://drive.google.com/embeddedfolderview?id=YOUR FOLDER ID#grid"
    <iframe src="https://drive.google.com/embeddedfolderview?id=YOUR FOLDER ID#grid" width="100%" height="500" frameborder="0"></iframe>
  • หมายเหตุ โฟลเดอร์ต้องแชร์ให้ทุกคนอ่านได้


Code.gs




function doPost(e){
    const obj = JSON.parse(e.postData.contents)
    return signin(obj)
}


function signin(obj){
    const dataAll = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("user").getDataRange().getDisplayValues()
    try{
        let item = dataAll.findIndex(r=> r[0] === obj.userID && r[1] === obj.pwd )
        if(~item){
            return ContentService.createTextOutput("Successfully")
        }else{
            return ContentService.createTextOutput("Try again")
        }
    }catch(err){
        return ContentService.createTextOutput(err)
    }
}

index.html





<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Login</title>
        <style>
            .inputtext {
                width: 100%;
                vertical-align: middle;
                margin: 5px 10px 5px 0;
                padding: 10px;
                background-color: #ffffff;
                border: 2px solid #000;
                border-radius: 20px;
                box-sizing: border-box;
            }

            .button {
                width: 100%;
                vertical-align: middle;
                margin: 5px 10px 5px 0;
                padding: 10px;
                background-color: #ff49c2;
                border: 2px solid #e2036b;
                border-radius: 20px;
                box-sizing: border-box;
                text-transform: uppercase;
                color: white;
            }

            div {
                font-family: arial;
                font-weight: bold;
            }

            #msg {
                color: #000000;
            }

            body {
                overflow-y: hidden;
                /* Hide vertical scrollbar */
                overflow-x: hidden;
                /* Hide horizontal scrollbar */
            }
        </style>
    </head>
    <body>
        <center>
            <center>
                <div class="div1" style="width:300px">
                    <form name="myform" method="POST">
                        <input type="text" name="uname" class="inputtext" autocomplete="off" placeholder="username">
                        <br>
                        <input type="password" name="pass" class="inputtext" autocomplete="off" placeholder="password">
                        <br>
                        <input type="button" class="button" name="log" id="logbutton" value="Login" onclick="login()">
                        <br><br>
                    </form>
                </div>
            </center>
          <div id= "frame" style="width:100%"></div>
        </center>
        <script type="text/javascript">
            //App Script URL
            const url = "https://script.google.com/macros/s/AKfy........FCmZ609DFA/exec"; //Change API URL    
            function login() {
                const user = document.forms["myform"]["uname"].value;
                const pass = document.forms["myform"]["pass"].value;
                const obj = {
                    userID: user,
                    pwd: pass
                };
                fetch(url, {
                    method: "POST",
                    body: JSON.stringify(obj)
                })
                .then((r) => r.text())
                .then((data) => {
                    if(data === "Successfully"){
                        document.forms["myform"].reset()
                        document.querySelector("#frame").innerHTML = `
                        <iframe src="***URL***" style="width:100%; height:350px; border:0;"></iframe>
                        <br><br>
                        <iframe src="***URL***" style="width:100%; height:450px; border:0;"></iframe>`
                    }else{
                        document.forms["myform"].reset()
                        document.querySelector("#frame").innerHTML = data
                    }
                })
            }

        </script>
    </body>
</html>

Google sheet



DEMO 1  Google Site       DEMO 2 Github

Login: user: a password: 1



Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า