How to implement a sign-in button of Google and Facebook in a Google AMP? - facebook-login

I want to create a simple "sign-in" button of Facebook and Google.
I read the documentation (https://amp.dev/documentation/examples/personalization/oauth2_login/#setup)
and look at the example in the playground section, but my problem is how do I do this part
"facebook-sign-in": "https://ampbyexample.com/oauth/login/facebook",
"google-sign-in": "https://ampbyexample.com/oauth/login/google",
in example of AMP documentation:
<script id="amp-access" type="application/json">
{
"authorization": "https://ampbyexample.com/oauth/status?_=RANDOM",
"noPingback": "true",
"login": {
"facebook-sign-in":"https://ampbyexample.com/oauth/login/facebook",
"google-sign-in":"https://ampbyexample.com/oauth/login/google",
"github-sign-in":"https://ampbyexample.com/oauth/login/github",
"sign-out":"https://ampbyexample.com/oauth/logout"
},
"authorizationFallbackResponse": {
"error": true,
"loggedIn": false
}
}
</script>
What do I do inside of this file https://ampbyexample.com/oauth/login/facebook in my application? what do I need to do it? I'm so confused about this part.
EDIT
I found this example but how make this logic with facebook without open a new pop up inside of amp's popup? (https://developers.facebook.com/docs/facebook-login/web) about this example, my login button just stay inside of amp popup... but my expected result is like this example here

Sign-in with amp-access will always open a new popup. This is to ensure that it's always possible to write first party cookies on your own origin, even if the AMP pages is served from an AMP cache.

Related

I don't understand how my google action shows up on "Works with Google" search

I have followed below tutorial to build my own home action.
https://github.com/actions-on-google/smart-home-nodejs
I don't understand well on how this works. Let me explain you all about what I have understood so far and what I have done by now.
What I have DONE :
I built a conversational action (built with dialogflow's inline editor and intents) to change a data of the Firebase realtime database. (for instance, when I say "Turn the light on", then the Firebase data 'LED/OnOff' turns 0 to 1). Below is the code I have in my Dialogflow inline editor. (I have excluded the field including my project's credentials.)
'use strict';
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
admin.initializeApp();
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
function welcome(agent) {
agent.add(`Welcome to my agent!`);
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
function handle_heatOn(agent) {
const state = agent.parameters.heat_on;
console.log(state);
var heat = 0;
if (state == 1)
heat = 1;
return admin.database().ref('0/OnOff').update({
on : true
});
}
function handle_heatOff(agent) {
const state = agent.parameters.heat_on;
var heat = 0;
if (state == 0)
heat = 0;
return admin.database().ref('0/OnOff').update({
on : false
});
}
//some more functions, related to controlling 4 different devices (heater, cooler, exhaust fan, LED) - exempted
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('heat_on', handle_heatOn);
intentMap.set('heat_off', handle_heatOff);
intentMap.set('cool_on', handle_coolOn);
intentMap.set('cool_off', handle_coolOff);
intentMap.set('exha_on', handle_exhaOn);
intentMap.set('exha_off', handle_exhaOff);
intentMap.set('led_on', handle_ledOn);
intentMap.set('led_off', handle_ledOff);
// intentMap.set('your intent name here', yourFunctionHandler);
// intentMap.set('your intent name here', googleAssistantHandler);
agent.handleRequest(intentMap);
});
Then I have deployed my action and Google has approved my action! It is now in production and can be searched in anyone's google account.
I have set up an OAuth 2.0 server. I'm really a beginner in developing, so I managed to use Auth0 to make the server. I have followed the below tutorial :
https://v3.jovo.tech/tutorials/google-action-account-linking-auth0
As a conclusion, when I invoke my conversational action in anyone's Google Assistant App, It will prompt the user to the authentication (login) screen (By Auth0). After the user inputs ID and Password, google assistant will link the user's account and launch my app.
However, my action is not shown on Google Home's "Works with Google" category. After trying to complete Brand Verification in Google Actions Console and linking one of my existent app on Google Play, I still don't know what to do or where to start from.
What I have understood so far :
Sorry for my shallow understanding in advance. I have understood that once my action is invoked by a user, it has to do account linking, which requires OAuth 2.0 server to exchange authentication token. If exchanging token has succeeded, the user's account is linked and he/she is able to use my action. The action will be launched after that.
I have searched the Internet and found some information such as Deep Linking and App Discovery, but I'm not sure this is the right keyword to start from.
I know I am really lacking in knowledge here. Please kindly at least hint where I should study and start.
What I want to understand and do :
I want to make my action, which is in production, show up on Google Home and Google Assistant App's "Works With Google" category without the prefix [test]. In other words, I want to let my app be searched just as the other company's apps. I understand that if you click on one of the apps of a company, your account will be linked and the company's action would be launched. Maybe I have to add some lines on Dialogflow's inline editor?? I know I might be silly, but I really appreciate your help. Thank you for reading my post.

AWS Amplify federated google login work properly on browser but dont work on Android

The issues are when I am trying to run federated authentication with the help of amplify auth method on the browser it works fine, but when I try to run it on my mobile.
It throws error No user found when I try to use Auth.currentSession() but the same work on the browser.
tried to search about this type of issue but I found related to ionic-cordova-google-plugin not related to AWS Amplify Federated Login Issue.
Updating the question after closing the question with less debugging information without asking for any information.
This is issues raised in git hub with respect to my problem.
Issue No. 5351 amplify js it's still in open state.
https://github.com/aws-amplify/amplify-js/issues/5351
Another issue 3537 which is still in Open
These two issues has the same scenario like me, I hope its enough debugging information, if more required mention comment instead of closing without notification, it's bullying for a beginner not helping
I fixed the above problem by referring a comment or wrapped around fix.
Link that will take to that comment directly link to comment.
First read the above comment as it will give you overall idea of what exactly the issue is instead of directly jumping to the solution.
Once you read the comment you will be little unclear with respect to implementation as he has use capacitor and not every one are using capacitor.
In my implementation I ignore this part as I am not using capacitor.
App.addListener('appUrlOpen')
Now lets go to main step where we are fixing this issue, I am using deep links to redirect to my application
this.platform.ready().then(() => {
this.deeplinks
.route({
"/success.html": "success",
"/logout.html": "logout",
})
.subscribe(
(match: any) => {
const fragment = JSON.stringify(match).split('"fragment":"')[1];
// this link can be your any link based on your requirement,
// what I am doing it I am passing all the data which I get in my fragments.
// fragments consists of id_token, stage, code,response type.
// These need to be passed to Ionic in order for Amplify to run its magic.
document.location.href = `http://192.168.1.162:8100/#${fragment}`;
},
(nomatch) => {
console.log("Got a deeplink that didn't match", nomatch);
}
);
});
I got this idea by referring the issue in which the developer mentioned of sending code and state along with application deep linking URL.

Facebook Javascript API unknown path components

I'm trying to integrate Facebook sharing into a webpage using this code edited from their official developer tutorial, but I'm not having any luck.
function postToFacebook(item_id)
{
FB.api(
'/me/completeset:display',
'post',
{ item: 'http://completeset.us/item/'+item_id },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Share was successful! Action ID: ' + response.id);
}
}); //End api
}
I've got the app set up, with an "item" object and the "defined" action defined. I haven't been able to submit the action yet though, because I haven't been able to post anything with it yet. I've verified that the item_id is being passed in correctly, and I've debugged the url using their debugging tool. When I call this function I'm getting unknown path components/ completeset:display. I haven't been able to find much information on this error, so I'm wondering: what are the causes, and how might I be able to fix it?
The names mismatched. The getCode link for the action on facebook displayed the name of the action as being show_off for some reason. It was the same problem as the linked question. I experimented with the app backend and found that if you create an action with one name and then change the name of it, it will display with the new name but you must still reference it using the old name in the code.

View attachments in threads

I'm currently working on an alternative way to view the threads and messages. But I have problems figuring out how to display the images attached to a message.
I have a GET request to this url: https://graph.facebook.com/t_id.T_ID/messages?access_token=ACCESS_TOKEN. And the response includes
"attachments": {
"data": [
{
"id": "df732cf372bf07f29030b5d44313038c",
"mime_type": "image/jpeg",
"name": "image.jpg",
"size": 76321
}
]
}
but I can't find any way to access the image.
Thanks
Support for this hasn't yet been added to the Graph API and as with many of the other messaging APIs, it's currently only avaialable for testing (i.e you must be a developer of the app to use it presently)
There's an undocumented REST API endpoint for this, which should work for any app (that you're the developer of, as above).
To use the REST method to get the attachment data, it's
https://api.facebook.com/method/messaging.getattachment
With parameters:
access_token=YOUR_ACCESS_TOKEN
mid=MESSAGE_ID
aid=ATTACHMENT_ID
format=json //(it defaults to XML otherwise)
The response is like this:
{"content_type":"image\/png","filename":"Screen Shot 2012-02-08 at 11.35.35.png","file_size":42257,"data":<FILE CONTENTS>}
I've just tested this and it worked OK for me, taking the <FILE CONTENTS> and base64 decoding them gave me back the original image correctly

Posting to a wall on Facebook for a fan page

Using the current PHPSDK and API (ie not FBJS or the REST approach) I am trying to work out how to paste to a fanpage wall and struggling to find any hints...
I have successfully (through various attempts)
posted to my wall
posted to a friend's wall
posted to the page's wall (when I like the page before posting)
posted to the page's wall (as the page)
So I am looking to work out what I need to do to access_code/permissions or code to have something like :
$result = $facebook->api(
'/<PAGEID>/feed/',
'post',
array('access_token' => <ACCESSCODE>, 'message' => 'Test message')
);
or
FB.api('/<PAGEID>/feed', 'post', {access_token:<ACCESSCODE>, message:'Test message'},
function(response) {
if (!response || response.error) {
alert(response.error.message);
} else {
}
});
working where a post will appear on the feed of page's wall... However I am currently unable to find a way to post to a page wall for a page that I have not explicitly said I like by using the Graph API in PHP...
I am sure it is possible judging by some of the page walls I have seen.
Searching on google and forums tends to lead to old API implementations (which no longer function) or using methods no longer supported. It seemed that the Templatized function could have been what I was looking for (but again that has been deprecated).
What am I doing wrong?
You have to have one of the page administrators give your app "publish_stream" permission. Something like this:
$session = $facebook->getSession();
$perms = 'publish_stream';
echo '<fb:login-button perms="' . $perms . '"></fb:login-button>';
Once the click the button and approve you, your callback url will get called with their session information.
Once you have that you can post to the wall of any page they administer. Using code like what you show in your question.