我正在开展一个反应原生项目,我需要在woocommerce rest api的帮助下创建一个应用程序来显示产品和订单。
我正在制作我自己的oauth请求来获取json数据,因为在本地反应中不支持crypto npm模块,因此我不能使用oauth管理器和woocommerce-api npm模块。
根据woocommerce的官方文档,我编写了请求所需的所有参数。
http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication-over-http
以下代码生成身份验证请求。
$CATALINA_HOME
每次发出请求时,都会收到以下错误。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
TextInput,
Alert,
Navigator,
TouchableHighlight,
View
} from 'react-native';
var n = require('nonce')();
var percentEncode = require('oauth-percent-encode');
var timestamp = require('timestamp');
var hmacsha1 = require('hmacsha1');
var Hashes = require('jshashes');
var appendQuery =require('append-query');
var consumerSecret = "cs_xxxxxxxxxxxxxxxxxxxxxxx";
var consumerKey ="ck_xxxxxxxxxxxxxxxxxxxxxxx";
var time = timestamp();
var nonce = n().toString();
console.log(nonce);
var httpMethod ="GET";
var storeURL = "http://stephin.xyz.net/wordpress/";
var endPoint = storeURL+"wc-api/v1/orders";
var params = percentEncode('oauth_callback')+"="+percentEncode('homebrew://')+"&"+percentEncode('oauth_consumer_key')+"="+percentEncode(consumerKey)+"&"+percentEncode('oauth_nonce')+"="+percentEncode(nonce)+"&"+percentEncode('oauth_signature_method')+"="+percentEncode('HMAC-SHA1')+"&"+percentEncode('oauth_timestamp')+"="+percentEncode(time);
var baseURL = httpMethod+"&"+percentEncode(endPoint)+"&"+percentEncode(params);
var signature= hmacsha1(baseURL,consumerSecret);
var finalURL = endPoint+'?oauth_consumer_key='+consumerKey+'&oauth_signature='+signature+'&oauth_signature_method=HMAC-SHA1&oauth_callback=honestbrew://&oauth_nonce='+nonce+'&oauth_timestamp='+time;
console.log(signature);
export default class HonestBrewLogin extends Component{
constructor(){
super();
this.state={
title: "Log In",
sitelogo:'../../assets/images/hb-logo.png',
email:"",
password:""
}
}
_handleAppLogin(){
if (this.state.email == "") {
if (this.state.password == "") {
// this.props.navigator.push({
// name: 'HonestBrewMyOrders', // Matches route.name
// });
console.log(finalURL);
fetch(finalURL).then((response) => console.log(response)).catch((error) => {
console.error(error);
});
}
else {
console.log("password incorect")
}
}
else {
console.log("email incorrect");
}
}
_handleRegisterLink(){
console.log("Link to register screen clicked");
}
_handleForgetPassword(){
console.log("Link to forgot password screen tapped");
}
render() {
return (
<View style={styles.loginContainer}>
<View style={styles.headingContainer}>
<Text style={styles.loginText}>
{this.state.title}
</Text>
</View>
<View style={styles.loginFormContainer}>
<View style={styles.loginImageSection}>
<Image style={styles.loginLogo} source={require("../../assets/images/hb-logo.png")} />
</View>
<View style={styles.loginSection}>
<TextInput
style={styles.loginEmailTextInput}
placeholder="Enter Email"
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
<TextInput
style={styles.loginPasswordTextInput}
placeholder="Enter Password"
value={this.state.password}
secureTextEntry={true}
onChangeText={(password) => this.setState({password})}
/>
<TouchableHighlight style={styles.loginSubmitButton} underlayColor="#deb887" onPress={this._handleAppLogin.bind(this)}>
<Text style={styles.loginSubmitButtonText}>Sign in</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.loginForgotPasswordLink} underlayColor="#deb887" onPress={this._handleForgetPassword}>
<Text>Forgot Password?</Text>
</TouchableHighlight>
</View>
</View>
<TouchableHighlight style={styles.registerLinkContainer} underlayColor="#deb887" onPress={this._handleRegisterLink}>
<Text>Dont have an account? Register now.</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
headingContainer: {
flex:0.2,
height:10,
marginTop:20,
alignItems:'center'
},
loginText:{
color: "#000",
textAlign:"center"
},
loginContainer:{
flex:1
},
loginFormContainer:{
backgroundColor: "#f0efeb",
alignItems:"center",
justifyContent:"center",
flex:8,
},
loginSection:{
flex:2,
flexDirection:"column",
alignItems:'center',
justifyContent:"flex-start"
},
registerLinkContainer:{
flex:0.2,
},
loginLogo:{
height:65,
width:100,
},
loginImageSection:{
flex:1,
alignItems:"center",
justifyContent:"flex-end"
},
loginEmailTextInput:{
height:40,
width:250,
marginTop:40,
padding: 10,
fontSize:14,
alignItems:"center",
backgroundColor:"#fff",
borderWidth:0.5,
borderColor: "#D6D3D3"
},
loginPasswordTextInput:{
height:40,
width:250,
marginTop:10,
padding: 10,
fontSize:14,
alignItems:"center",
backgroundColor:"#fff",
borderWidth:0.5,
borderColor: "#D6D3D3"
},
loginSubmitButton:{
height:40,
width:250,
backgroundColor:"#ff9002",
marginTop:20,
justifyContent:"center",
alignItems:"center"
},
loginSubmitButtonText:{
color:"#fff"
},
registerLinkContainer:{
alignItems:"center",
height:40,
justifyContent:"center"
},
loginForgotPasswordLink:{
marginTop:20
}
});
无论我做什么,最终结果都是这个错误。
答案 0 :(得分:0)
您的网站网址可能存在问题。 打开WordPress&gt;以管理员身份登录&gt;设置&gt;一般&gt;寻找WordPress地址(URL)。
您的请求网址应如下所示: WordPress地址(URL)+“/ wp-json / wc / v1 /”+ funtion_name +“/”添加条件+“?” + authcode
示例:
http://www.foo.boo/wordpress/wp-json/wc/v1/orders/45?oauth_consumer_key=ck_00000&oauth_signature_method=HMAC-SHA1&oauth_timestamp=0000000&oauth_nonce=000000&oauth_version=1.0&oauth_signature=000000=&oauth_token
答案 1 :(得分:0)
我已经制作了认证文件和woocommerce api文件及其工作。
Woocommerce API文件
'use strict';
import OAuth from "oauth-1.0a";
module.exports = WooCommerceAPI;
/**
* WooCommerce REST API wrapper
*
* @param {Object} opt
*/
function WooCommerceAPI(opt) {
if (!(this instanceof WooCommerceAPI)) {
return new WooCommerceAPI(opt);
}
opt = opt || {};
if (!(opt.url)) {
throw new Error('url is required');
}
if (!(opt.consumerKey)) {
throw new Error('consumerKey is required');
}
if (!(opt.consumerSecret)) {
throw new Error('consumerSecret is required');
}
this.classVersion = '1.0.0';
this._setDefaultsOptions(opt);
}
/**
* Set default options
*
* @param {Object} opt
*/
WooCommerceAPI.prototype._setDefaultsOptions = function (opt) {
this.url = opt.url;
this.wpAPI = opt.wpAPI || false;
this.wpAPIPrefix = opt.wpAPIPrefix || 'wp-json';
this.version = opt.version || 'v3';
this.isSsl = /^https/i.test(this.url);
this.consumerKey = opt.consumerKey;
this.consumerSecret = opt.consumerSecret;
this.verifySsl = false === opt.verifySsl ? false : true;
this.encoding = opt.encoding || 'utf8';
this.queryStringAuth = opt.queryStringAuth || false;
this.port = opt.port || '';
this.timeout = opt.timeout;
};
/**
* Normalize query string for oAuth
*
* @param {string} url
* @return {string}
*/
WooCommerceAPI.prototype._normalizeQueryString = function (url) {
// Exit if don't find query string
if (-1 === url.indexOf('?')) {
return url;
}
// var query = _url.parse(url, true).query;
var query = url;
var params = [];
var queryString = '';
for (var p in query) {
params.push(p);
}
params.sort();
for (var i in params) {
if (queryString.length) {
queryString += '&';
}
queryString += encodeURIComponent(params[i]).replace('%5B', '[').replace('%5D', ']');
queryString += '=';
queryString += encodeURIComponent(query[params[i]]);
}
return url.split('?')[0] + '?' + queryString;
};
/**
* Get URL
*
* @param {String} endpoint
*
* @return {String}
*/
WooCommerceAPI.prototype._getUrl = function (endpoint) {
var url = '/' === this.url.slice(-1) ? this.url : this.url + '/';
var api = this.wpAPI ? this.wpAPIPrefix + '/' : 'wp-json/';
url = url + api + this.version + '/' + endpoint;
// Include port.
if ('' !== this.port) {
var hostname = url; //_url.parse(url, true).hostname;
url = url.replace(hostname, hostname + ':' + this.port);
}
if (!this.isSsl) {
return this._normalizeQueryString(url);
}
return url;
console.log("Normalize URl:- "+url);
};
/**
* Get OAuth
*
* @return {Object}
*/
WooCommerceAPI.prototype._getOAuth = function () {
var data = {
consumer: {
public: this.consumerKey,
secret: this.consumerSecret
},
signature_method: 'HMAC-SHA256'
};
if (-1 < ['v1', 'v2'].indexOf(this.version)) {
data.last_ampersand = false;
}
return new OAuth(data);
console.log("My _Data:- "+data);
};
/**
* Join key object value to string by separator
*/
WooCommerceAPI.prototype.join = function (obj, separator) {
var arr = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(key + '=' + obj[key]);
}
}
;
return arr.join(separator);
}
/**
* Do requests
*
* @param {String} method
* @param {String} endpoint
* @param {Object} data
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype._request = function (method, endpoint, data, callback) {
var url = this._getUrl(endpoint);
var params = {
url: url,
method: method,
encoding: this.encoding,
timeout: this.timeout,
headers: {
'User-Agent': 'WooCommerce API React Native/' + this.classVersion,
'Content-Type': 'application/json',
'Accept': 'application/json'
}
};
if (this.isSsl) {
if (this.queryStringAuth) {
params.qs = {
consumer_key: this.consumerKey,
consumer_secret: this.consumerSecret
};
} else {
params.auth = {
user: this.consumerKey,
pass: this.consumerSecret
};
}
if (!this.verifySsl) {
params.strictSSL = false;
}
}
else {
params.qs = this._getOAuth().authorize({
url: url,
method: method,
data: data
});
}
// encode the oauth_signature to make sure it not remove + charactor
params.qs.oauth_signature = encodeURIComponent(params.qs.oauth_signature);
var requestUrl = params.url + '?' + this.join(params.qs, '&');
// extra data info for paging
if (data) {
requestUrl += '&' + this.join(data, '&');
}
// console.log('encode', params.qs.oauth_signature);
console.log("Request URl:- "+requestUrl);
return fetch(requestUrl,
{
headers: {
'Cache-Control': 'no-cache'
}
})
.then((response) => {
console.log(response);
return response.json()
})
.then((responseData) => {
if (typeof callback == 'function') {
callback();
}
return responseData
})
.catch((error, data) => {
console.log('error network -', error, data);
}
);
};
/**
* GET requests
*
* @param {String} endpoint
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype.get = function (endpoint, data, callback) {
return this._request('GET', endpoint, data, callback);
};
/**
* POST requests
*
* @param {String} endpoint
* @param {Object} data
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype.post = function (endpoint, data, callback) {
return this._request('POST', endpoint, data, callback);
};
/**
* PUT requests
*
* @param {String} endpoint
* @param {Object} data
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype.put = function (endpoint, data, callback) {
return this._request('PUT', endpoint, data, callback);
};
/**
* DELETE requests
*
* @param {String} endpoint
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype.delete = function (endpoint, callback) {
return this._request('DELETE', endpoint, null, callback);
};
/**
* OPTIONS requests
*
* @param {String} endpoint
* @param {Function} callback
*
* @return {Object}
*/
WooCommerceAPI.prototype.options = function (endpoint, callback) {
return this._request('OPTIONS', endpoint, null, callback);
};
&#13;
API文件
import WooCommerceAPI from "./WooCommerceAPI";
import Constants from './Config';
var Api = new WooCommerceAPI({
url: Constants.URL.root,
consumerKey: Constants.Keys.ConsumeKey,
consumerSecret: Constants.Keys.ConsumerSecret,
wp_api: true,
version: 'wc/v2',
queryStringAuth: true
});
export default Api;
&#13;
配置文件
'use strict';
const Constants = {
URL: {
root: 'https://www.yoururl.com/wordpress'
},
Keys: {
ConsumeKey: '',
ConsumerSecret: ''
},
}
module.exports = Constants;
&#13;
使用此代码创建oauth网址,然后您的代码就可以使用。
答案 2 :(得分:0)
'use strict';
const Constants = {
URL: {
root: 'https://www.yoururl.com/wordpress'
},
Keys: {
ConsumeKey: '',
ConsumerSecret: ''
},
}
module.exports = Constants;