How to shorten url which contains Id and parse that id when the url is clicked - react-native

I am using linking to link my react-native app to my domain
https://www.example.com/
I am also passing an id which changes based on the article shared
So the shared url looks like:
https://www.example.com/12234503
What i want to do is shorten this using firebase dynamic links(I can only use this)
I have no clue how to pack this id into the createShortDynamicLink function or how to access the id i got when i will open this short link in my app
This is what my code without firebase links looks right now
Accepting the url
componentDidMount() {
Linking.addEventListener('url', this.handleUrl);
Linking.getInitialURL().then((url) => {
if (url) {
Linking.openURL(url);
}
}).catch(err => console.error('An error occurred', err));
DeepLinking.addScheme('https://');
DeepLinking.addRoute('www.example.com/:id', (response) => {
this.props.navigation.navigate('Article',{id:response});
});
So i open the app and then take the use to the page where i use the id to load the article
Sharing the Url using react-native-share
let shareOptions = {
title: "Share This Story",
message: "Read This Awsome Article:",
url: "https://www.example.com/"+this.state.id,
subject: "Share Link"
};
Share.open(shareOptions).catch((err) => { err && console.log(err); });
Can you give me a rough outline of code that shows me how can i implement the same using firebase dynamic links
All this is because i want to shorten the shared link
I have a domian to confige

Have you tried this?
url: `https://www.example.com/${this.state.id}`

Related

how to get data from local google Auth?

I am facing a problem in findding a login data of user and user is logedin to my site using google auth platform and i want to get that login data and store data in my local storage and I am working on Angular 14
Kindly help if any one know the soluiton of this problem
Thanks
I had searched a lot but not find a convieniet solution
It's work for me in this way.
According to the new documentation of Google (https://developers.google.com/identity/gsi/web/guides/overview), you should follow next steps:
Create a google app in google cloud console platform and generate a client id.
Load the client library. Add this script "<script src="https://accounts.google.com/gsi/client" async defer>" between the <head></head> tags of your index.html file of Angular project.
Add this code on ngOnInit() function in the component that you would like to have "Sign in with Google button."
ngOnInit() {
// #ts-ignore
google.accounts.id.initialize({
client_id: "YOUR GOOGLE CLIENT ID",
callback: this.handleCredentialResponse.bind(this),
auto_select: false,
cancel_on_tap_outside: true,
});
// #ts-ignore
google.accounts.id.renderButton(
// #ts-ignore
document.getElementById("google-button"),
{ theme: "outline", size: "large", width: "100%" }
);
// #ts-ignore
google.accounts.id.prompt((notification: PromptMomentNotification) => {});
}
async handleCredentialResponse(response: any) {
// Here will be your response from Google.
console.log(response);
}
Add div or button element to the html file of this component, with the same id that you mentioned into the initialization. ( "google-button" ):
<div class="" id="google-button"></div>.
Let me know if you have any issues.

how solve 404 error in axios post request in vue?

i want send request to an api but i have 404 erro and i have nothing in network
can you help me?
my code:
loginMethod() {
const config = {
userName: "test#gmail.com",
password: "1234test",
};
return new Promise((resolve) => {
ApiService.post("api/authentication/login", config)
.then(({ data }) => {
console.log(data);
resolve(data);
})
.catch(({ response }) => {
console.log(response);
});
});
},
and ApiService function:
post(resource, params) {
console.log(params);
const headers = {
"E-Access-Key": "bb08ce8",
};
return Vue.axios.post(`${resource}`, params, { headers: headers });
},
Based only on what I can see in your code, you are not telling axios the complete URL if I'm right about it, and you didn't declare it somewhere else do this:
axios.post('yourdomain.com/api/authentication/login',params)
or
axios({
url:'yourdomain.com/api/authentication/login',
method:post,
data:{}
})
or
in your main js file or any other file that you import axios (if you are sharing an instance of it globali):
axios({baseurl:'yourdomain.com'})
and then you don't need to write the complete url everywhere and just insert the part you need like you are doing now and axios will join that address with the baseurl,I hope it helps
I guess the URL "api/authentication/login" might be wrong and the correct one would be "/api/authentication/login" that starts with /.
404 error means the resource referred by the URL does not exist. It happens when the server has deleted the resource, or you requested a wrong URL accidentally, or any wrong ways (e.g. GET vs POST)
To make sure if you were requesting to the correct URL (and to find where you're requesting actually), open Google Chrome DevTools > Network panel. You might need reload.
The url api/xxx is relatively solved from the URL currently you are at. If you were at the page http://example.com/foo/bar, the requested URL becomes http://example.com/foo/bar/api/xxx. Starting with / means root so http://example.com/api/xxx.
This answer might help to understand the URL system: https://stackoverflow.com/a/21828923/3990900
"404" means your API Endpoint is not found. You need to declare the location of your API Endpoint exactly. For example: http://localhost:8080/api/authentication/login.

Can't get fetch(url) working in React-Native

I am trying to retrieve the json response from api url using fetch (method : GET) in react-native.
constructor(props){
super(props);
this.state = {jsonData: {}};
}
componentWillMount() {
console.log("inside componentWillMount");
fetch('http://localhost:3000/listData')
.then((response) => {console.log('response: '); return response.json();})
.then((responseJson) => {console.log('responseData: '+JSON.stringify(responseJson)); return this.setState({jsonData: responseJson});})
.catch((err) => {console.log(err)});
}
The api returns data in this format:
{
object: 'list',
data: [...]
}
The api url works via curl. I also tried to run the fetch part of the code standalone using node by installing node-fetch and it printed the responseData properly.
But, in react-native, it doesn't print any of the console log statements inside the then function of fetch nor does it set the state of jsonData.
Could you please tell me what could be the problem? I have been googling around for quite a long time trying to find what could be the issue.
EDIT
I tried the async fetch as follows:
componentWillMount() {
console.log("inside componentWillMount");
this.fetchData().done();
}
async fetchData(){
const response = await fetch('http://localhost:3000/listData')
const json = await response.json();
const data = json.url;
console.log('data'+url);
}
Still, the same issue persists.
I am not able to understand why it works with the facebook url and not my local api url
SOLUTION
Thanks to Michael Cheng for pointing me in the right direction.
I found this link :
https://github.com/react-community/create-react-native-app/issues/154 .
Code Fix:
I just replaced the localhost with my ipv4 address as http://myserveripv4address:3000/listData and it worked.
Version:
react-native#0.50.4
Device : Android
some ideas:
if is iOS, you need the remote url to be https or disable this security feature;
You may need to mark your fetch() as async function;
Try to make an async fetch w/o promise.

How to get response from CustomTabs in react-native

I have added CustomTabs in my app to redirect on external url. I want to get response from url that is opened in CustomTabs in my app and CustomTabs would be close automatically. url that is opened return array and I want to use array in my app.
code for custom tab:-
url = 'https://www.example.com/newtest.php';
CustomTabs.openURL(url,{ toolbarColor: '#607D8B',enableUrlBarHiding: true,showPageTitle: true,enableDefaultShare: true,animations: ANIMATIONS_SLIDE}).then((launched: boolean) => {
console.log(`Launched custom tabs: ${launched}`);
}).catch(err => {
console.error(err)
});
I have no idea. what can i do for this ?

Podio POST request returns unauthorized

I'm working on a Podio integration as a Slack bot.
I'm starting to use it just for use for my company to test it, then I could share it with everybody.
I've used the podio-js platform with Node JS, and started locally with a "web app" by starting from this example: https://github.com/podio/podio-js/tree/master/examples/password_auth
I need to do a post request, so I maintained all the code of the example in order to log in with user and password. The original code worked, then I changed the code to make a post request, in particular I change the lines of index.js into this:
router.get('/user', function(req, res) {
podio.isAuthenticated().then(function () {
var requestData = { "title": "sample_value" };
return podio.request('POST', '/item/app/15490175', requestData);
})
.then(function(responseData) {
res.render('user', { data: responseData });
})
.catch(function () {
res.send(401);
});
});
But in the end is giving a "Unauthorized" response.
It seems like the password auth doesn't let to make POST request to add new items! Is that possible?
I've already read all the documentation but I'm not able to explain why and how I can solve this.
Regards