เราทำเว็บที่ให้ Login ด้วย Gmail โดยใช้เครื่องมือของ Google SignIn ซึ่งทำได้แล้ว คือ เมื่อเข้าเว็บจะเจอภาพที่ 1 ทำการ SignIn ด้วย Gmail แล้วมันจะ redirect เปิดหน้าต่างใหม่ให้ ดังภาพที่ 2
------------------------------------------------------------------
แต่สิ่งที่อยากทำคือ อยากให้มัน redirect อยู่ในหน้าเดิม ให้มีเมนูของเว็บยังคงอยู่ เลยใช้ iframe เข้ามาช่วย แต่เมื่อมันเข้ามาอยู่ใน iframe มันดันขึ้นว่า
"www.google.com ปฏิเสธการเชื่อมต่อ" เราผิดตรงไหนคะ
--------------------------------------------------------------------
*ลูกศรสีเขียวทดลองใส่ iframe src ไป youtube ธรรมดา ใช้งานได้
*ลูกศรสีแดง iframe ไม่ได้หน้าเว็บให้
--------------------------------------------------------------------
เหตุผลที่อยากใส่ใน iframe เพราะไม่อยากให้ เวลามัน redirect ไปแล้ว มันขึ้น url ข้างบนค่ะ แบบภาพที่ 2 ค่ะ
โค้ด
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้<!DOCTYPE html>
<html lang="en">
<head>
<!-- กำหนดขอบเขตท้อมูลการร้องขอ มี profile กับ email-->
<meta name="google-signin-scope" content="profile email">
<!-- กำหนด client ID ที่เราได้สร้างไว้-->
<meta name="google-signin-client_id" content="xxxxxx.apps.googleusercontent.com">
<!-- ต้องมีการเรียกใช้งาน Google Platform Library ในหน้าที่มีการใช้งาน Google Sign In-->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<title>E-learning by KruSaranpat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
||||||||||ตรงนี้คือโค้ดส่วนของ Banner และเมนู||||||||||
<!-- วางปุ่มล็อกอินด้วย Google ในตำแหน่งที่ต้องการ-->
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="light"></div>
<br>
<br>
<!--ปุ่มล็อกเอ้าท์ออกจาก Google Sign In อย่างง่าย ที่ให้เราออกจากการล็อกอินผ่าน Google-->
<a href="javascript:void(0);" onclick="signOut();">Sign out</a>
<script>
// var urlDirect="http://www.google.com"; // หนัาที่ต้องการให้แสดงหลังล็อกอิน
/* สังเกตจากปุ่มล็อกอินด้านบน จะเห็นว่ามีการกำหนด data-onsuccess="onSignIn"
ซึ่งก็คือเมื่อมีการล็อกอินผ่าน Google แล้วให้เรียกใช้งานฟังก์ชั่น ที่ชื่อ onSignIn*/
function onSignIn(googleUser) {
parent.ifrm.location="https://www.google.com";
// ขอมูลของผู้ใช้งานที่ล็อกอิน ที่เราสามารถนำไปใช้งานได้
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // google แนะนำว่าไม่ควรส่งคานี้ไปเก็บไว้บน server
// ค่า ID นี้เราสามรรถประยุกต์เพิ่มเติมตามต้องการ เช่นอาจจะเข้ารหัสก่อนบันทึกหรืออะไรก็ได้
// แต่ในที่นี้จะใช้วิธีอยางง่ายเพื่อเป็นแนวทาง
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// google แนะนำให้ใช้ ID token สำหรับใช้ในการตรวจสอบการล็อกอิน
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
if(profile.getId()!=null && profile.getName()!=null){
// ส่งข้อมูลไปใช้งาน เช่นตรวจสอบการล็อกอิน หรือสร้างข้อมูลสมาชิกใหม่
$.post("checkuser.php",{
ggname:profile.getName(),
ggemail:profile.getEmail(),
ggid:profile.getId(),
idTK:id_token
},function(data){
console.log(data);
parent.ifrm.location="https://www.google.com";
});
}else{
alert("เกิดข้อผิดพลาด กรุณาลอกใหม่!");
}
};
</script>
<script>
/* ฟังก์ชั่นล็อกเอาท์*/
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<iframe src="" name="ifrm" id="ifrm" frameborder="0" width="700" height="500">
</body>
</html>
ขอสอบถามการทำ redirect เว็บหน่อยค่ะ
------------------------------------------------------------------
แต่สิ่งที่อยากทำคือ อยากให้มัน redirect อยู่ในหน้าเดิม ให้มีเมนูของเว็บยังคงอยู่ เลยใช้ iframe เข้ามาช่วย แต่เมื่อมันเข้ามาอยู่ใน iframe มันดันขึ้นว่า
"www.google.com ปฏิเสธการเชื่อมต่อ" เราผิดตรงไหนคะ
--------------------------------------------------------------------
*ลูกศรสีเขียวทดลองใส่ iframe src ไป youtube ธรรมดา ใช้งานได้
*ลูกศรสีแดง iframe ไม่ได้หน้าเว็บให้
--------------------------------------------------------------------
เหตุผลที่อยากใส่ใน iframe เพราะไม่อยากให้ เวลามัน redirect ไปแล้ว มันขึ้น url ข้างบนค่ะ แบบภาพที่ 2 ค่ะ
โค้ด
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้